hs_vincent
hs_vincent

Flow + React/React Native

学习如何在Flow中使用React

将Flow类型添加到React组件后，Flow将静态地确保你按照组件被设计的方式开发。在React早期，该库提供了执行基本运行时检查的PropType。而Flow的强大之处在于它在你运行代码前告诉你哪里出了问题。

如果你想同时进行静态和运行时检查，有一些Babel插件可以做到将Flow类型生成PropTypes，例如babel-plugin-react-flow-props-to-prop-types。

组件(Components)

学习如何在Flow中使用React类组件和无状态函数组件

类组件

在我们展示如何使用Flow键入React类组件之前，让我们先展示如何编写一个没有 Flow 的React类组件，但使用React的prop类型。你将扩展React.Component并添加一个静态propTypes属性。

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    foo: PropTypes.number.isRequired,
    bar: PropTypes.string,
  };

  render() {
    return 
{this.props.bar}
;
  }
}

现在，在我们刚才写的组件中引入flow：

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

class MyComponent extends React.Component {
  render() {
    this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

    return 
{this.props.bar}
;
  }
}

;

我们删除了对prop-types的依赖，并添加了一个名为Props的Flow对象类型，其形式与prop类型相同，但是使用了Flow的静态类型语法。 然后我们将新的Props类型作为类型参数传递给React.Component。

现在如果你尝试在中使用一个类型为string的foo（类型是number），将提示错误。无论我们在React组件中何处使用this.props，Flow都会将其视为我们定义的Props类型。

注意：如果你不需要再次使用Props类型，可以用内联方式定义：extends React.Component <{foo: number, bar?: string}>

注意： 我们在这里导入React作为命名空间，import * as React from "react"，而不是使用默认导入，import React from "react"。在将React作为ES模块导入时，可以使用任何一种样式，但作为命名空间导入方便你访问React的公共类型。

React.Component 是一个带有两个类型参数泛型类型，Props和State。第二个参数State是可选的，默认情况下它是未定义的，所以你可以在上面的例子中看到我们没有包含State。

添加状态

现在为React类组件的State创建一个新的对象类型，在下面的例子中我们将其命名为State，并将其作为第二个类型的参数传递给React.Component。

import * as React from 'react';

type Props = { /* ... */ };

type State = {
  count: number,
};

class MyComponent extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => ({
        count: prevState.count + 1,
      }));
    }, 1000);
  }

  render() {
    return 
Count: {this.state.count}
;
  }
}

;

在上面的例子中，我们使用了一个React的setState()更新函数，但是你也可以把一个局部的状态对象传给setState()。

注意：如果你不需要再次使用State类型，可以用内联方式定义：extends React.Component <{}, {count: number}>

使用默认Props

React支持defaultProps的概念，你可以把它看作默认的函数参数。当你创建一个元素并且你没有包含一个默认的props时，React将会从defaultProps中获取相应的值。Flow也支持这个概念。要使用defaultProps，则在类中添加static defaultProps。

import * as React from 'react';

type Props = {
  foo: number, // 必须
};

class MyComponent extends React.Component {
  static defaultProps = {
    foo: 42, // ...默认的foo
  };
}

// 不传入foo也无妨

Flow会从静态的defaultProps中推断出你的默认props的类型，所以你不需要添加任何类型的注释来使用defaultProps。

注意：你不需要在你的Props类型中设置foo为可选的。如果你的默认Props中有foo，Flow将确保foo是可选的。

无状态函数组件

除了类，React还支持无状态的函数组件。你可以像键入一个函数一样键入这些组件：

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

function MyComponent(props: Props) {
  props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

  return 
{props.bar}
;
}

无状态函数组件中使用默认Props

与类组件类似，React的无状态函数组件也支持defautProps。无状态函数组件的默认Props将无需任何额外的类型注释。

import * as React from 'react';

type Props = {
  foo: number, // 必须
};

function MyComponent(props: Props) {}

MyComponent.defaultProps = {
  foo: 42, // 默认foo
};

// 不传入foo也无妨
;

事件处理(Event Handling)

Flow中React事件处理的类型和最佳实践
在React文档“处理事件”提供了一些关于如何定义事件处理程序的不同建议。如果你正在使用Flow，建议使用属性初始值设定项语法，因为相对静态类型最简单。 属性初始值设定器的语法如下所示：

class MyComponent extends React.Component<{}> {
  handleClick = event => { /* ... */ };
}

合成事件（SyntheticEvent）

一个跨浏览器原生事件包装器。 它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，除了事件在所有浏览器中他们工作方式都相同。

编写事件处理程序中你可能会用到SyntheticEvent类型，如下所示：

import * as React from 'react';

class MyComponent extends React.Component<{}, { count: number }> {
  handleClick = (event: SyntheticEvent) => {
    // 使用 event.currentTarget访问button 实例
    // (event.currentTarget: HTMLButtonElement);

    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      

        
Count: {this.state.count}

        
      

    );
  }
}

还有更多特定的合成事件类型，如SyntheticKeyboardEvent ，SyntheticMouseEvent 或SyntheticTouchEvent 。 SyntheticEvent 类型都采用单一类型的参数。事件处理程序所在的HTML元素的类型。

如果你不想添加你的元素实例的类型，你也可以使用SyntheticEvent，而不需要像这样的类型参数：SyntheticEvent <>。

注意：为了得到元素实例，如上例中的HTMLButtonElement，使用event.target而不是event.currentTarget是一个常见的错误。 你想使用event.currentTarget的原因是event.target可能是错误的元素，由于事件冒泡。

注意：React使用自己的事件系统，因此使用SyntheticEvent类型而不是Event，KeyboardEvent和MouseEvent等DOM类型非常重要。

React提供的SyntheticEvent 类型和它们相关的DOM事件是:

  • SyntheticEvent --- Event
  • SyntheticAnimationEvent --- AnimationEvent
  • SyntheticCompositionEvent --- CompositionEvent
  • SyntheticInputEvent --- InputEvent
  • SyntheticUIEvent --- UIEvent
  • SyntheticFocusEvent --- FocusEvent
  • SyntheticKeyboardEvent --- KeyboardEvent
  • SyntheticMouseEvent --- MouseEvent
  • SyntheticDragEvent --- DragEvent
  • SyntheticWheelEvent --- WheelEvent
  • SyntheticTouchEvent --- TouchEvent
  • SyntheticTransitionEvent --- TransitionEvent

ref 函数(ref functions)

学习如何在flow中使用ref 函数

React允许你用ref函数获取某个元素或组件的实例。要使用ref函数，可以在你的类中添加一个可选的实例类型，并将你的实例分配给你的ref函数中的该属性。

import * as React from 'react';

class MyComponent extends React.Component<{}> {
  button: ?HTMLButtonElement;
  render() {
    return ;
  }
}

在上面的例子中，ref的第一个参数是HTMLButtonElement | null，因为当组件卸载时，React将用null调用你的ref回调。另外，在React完成渲染之前，MyComponent上的button属性将不会被设置。在那之前你的按钮引用将是未定义的。使用可选标志?（如在?HTMLButtonElement）避免引用异常。

Children

学习如何使用flow严格规范组件接收的子元素

React元素可以有零个或多个子元素。使用Flow描述这些子元素让你能够构建富有表现力的React API。当为React组件的子项添加类型时，需要考虑的类型是React.Node。

import * as React from 'react';

type Props = {
  children?: React.Node,
};

function MyComponent(props: Props) {
  return 
{props.children}
;
}

注意：这里使用import * as React from 'react'来访问React.Node类型而不是import React from 'react'。 我们在后续的React Type Reference中解释为什么。

然而，如果你想用React children API做更强大的事情，那么你需要对如何使用它有所了解。先从一个没有chidlren组件的例子开始，让我们先看看几个案例。（已经了解的同学可以跳过这一块）

;
// 等同于...
React.createElement(MyComponent, {});

如果不传入任何子元素，则不会设置props.children。 如果你尝试访问props.children，它将是undefine的。

{42};
// 等同于...
React.createElement(MyComponent, {}, 42);

如果传递一个单一的值，那么props.children就是那个单一的值。这里props.children将是数字42。重要的是，props.children不会是一个数组它的值是42。

{1}{2};
// 等同于...
React.createElement(MyComponent, {}, 1, 2);

或者

{'hello'} world;
// 注意这里world前面的空格
// 等同于...
React.createElement(MyComponent, {}, 'hello', ' world');

亦或者

{'hello'} world;
// 注意这里前面的空格
// 
//   {'hello'}
//   world
// 
// 换成这样写后换行符后的换行符和缩进会被删除，所以这里这样写不会有空格。

// 等同于...
React.createElement(
  MyComponent,
  {},
  'hello',
  ' ',
  React.createElement('strong', {}, 'world'),
);

现在传递两个或多个值，props.children是一个数组，上面的例子中，它的值可能是[1, 2]或者['hello', 'world']或者['hello', ' ', world]

这里思考一个问题，如果我们的children是一个数组，那么props.children是一个二维数组吗？不是的。

{[1, 2]};
// 等同于...
React.createElement(MyComponent, {}, [1, 2]);

与传递单一值的规则一样，尽管[1,2]是一个数组，它是一个单一的值，所以props.children就是这个值。这就是说props.children将是数组[1,2]而不是一个二维数组。

同样的，当你使用array.map()传递一个数组时也是相当于传递单一值。


  {messages.map(message => {message})}

// 等同于...
React.createElement(
  MyComponent,
  {},
  messages.map(message => React.createElement('strong', {}, message)),
);

但是，如果是多个数组元素并且是独立的，那将会发生什么？

{[1, 2]}{[3, 4]};
// 等同于...
React.createElement(MyComponent, {}, [1, 2], [3, 4]);

这里props.children将是一个二维数组。具体值将是[[1，2]，[3，4]]。

React children的规则是，如果传递值，那么props.children不会被设置，如果传递单一的值，那么props.children将被设置为正确的值，如果传递多个值，props.children将是这些值的新数组。

注意


  // some comment...
  {42}

这里会编译成：React.createElement(MyComponent, {}, '// some comment...', 42)，这时候prop.children的值为['// some comment...', 42]。在JSX中使用注释需遵循下面的语法：


  {/* some comment... */}
  {42}

只允许接收特定子元素

有时候你想你的React组件只接收特定的组件作为子元素。这通常发生构建一个需要特定列子组件的表格组件或者需要为每个选项卡进行特定配置的选项卡栏时。比如，React Native的标签栏组件就是使用这种模式模式。

React Native的组件只允许React元素子元素，而且这些元素必须具有的组件类型。如：


  {/* ... */}
  {/* ... */}
  {/* ... */}

而当我们用以下的方式使用时则会抛出异常：


  {/* ... */}
  {/* ... */}
  {/* ... */}
  {/* ... */}
  {/* ... */}

所以flow是如何帮助我们阻止这种不规范的用法？

import * as React from 'react';

class TabBarIOSItem extends React.Component<{}> {
  // implementation...
}

type Props = {
  children: React.ChildrenArray>,
};

class TabBarIOS extends React.Component {
  static Item = TabBarIOSItem;
  // implementation...
}


  {/* ... */}
  {/* ... */}
  {/* ... */}
;

我们将props中children的类型设置为React.ChildrenArray >，这将保证只能接收TabBarIOS.Item 类型的React元素。

注意：如果想使用map()和forEach()方法或想跟处理JavaScript数组一样处理数组React.ChildrenArray，React在React.Children API中提供了React.Children.toArray()方法使你可以像JavaScript一样处理数组React.ChildrenArray。

强制只接收一个子元素。

有时候你想强制你的组件只接收一个子元素。你可以使用React.Children.only()函数来约束这种行为，但是你也可以使用Flow实现同样的效果。现在你不能再使用React.ChildrenArray包裹并定义你子元素的类型：

import * as React from 'react';
type Props = {
  children: React.Element,
};
function MyComponent(props: Props) {...}
// 抛异常! 必须传入子元素
;
// 抛异常! 传入了两个或多个子元素

  

  

  

;
// 正常，传入一个子元素

  

;

React允许你传递任何值来作为React组件的子项：


  {data => (
    
{data.foo}

  )}

react-router 版本4允许接收一个函数作为 组件的子元素。


  {({ match }) => (
    
  • 
      
    
    • 
  )}

    如何在Flow中使用组件：

    import * as React from 'react';
type Props = {
  children: (data: { match: boolean }) => React.Node,
  path: string,
  // 其它props...
};

class Route extends React.Component {...}

  {({ match }) => (
    
  • 
      
    
    • 
  )}
    ;

    children的类型是一个函数，它接收一些对象类型并返回一个React.Node，React.Node是React可以渲染的任何值的类型。一个子函数不需要返回React.Node。它可以返回任何类型，但是在这种情况下，react-router需要渲染由children函数返回的结果。

    React.Node是chidlren的一般类型，但有时你可能想要使用React.Node，同时排除一些像字符串和数字的基本类型。例如，React Native 组件就执行了此操作。

    React Native 组件将允许任何原始值或任何React元素作为其子元素。 但是，不允许字符串或数字作为子项！ 你可以使用React.Node作为的子类型，但是React.Node包含了我们不希望用于的字符串。 所以我们需要创建自己的类型。

    import * as React from 'react';

type ReactNodeWithoutStrings = React.ChildrenArray<
  | void
  | null
  | boolean
  | React.Element
>;

type Props = {
  children?: ReactNodeWithoutStrings,
  // other props...
};

class View extends React.Component {
  // implementation...
}

    React.ChildrenArray是为React嵌套数组数据结构建模的一种类型。 ReactNodeWithoutStrings使用React.ChildrenArray 作为null，boolean或React元素的任意嵌套数组。

    React.Element 是React元素的类型，如

    或。 值得注意的是元素和组件不一样！

    高阶组件(Higher-order Components)

    学习如何在flow中使用React高阶组件

    高阶组件模式是React中流行的一种模式。如果你还不知道更高级的组件是什么，那么请确保在继续之前阅读高阶组件的React文档。

    要学习如何使用更高阶的组件，我们先看看Recompose 中有关高阶组件的例子。Recompose是一个流行的React库，提供了许多更高阶的组件，其作者也是Redux的编写者。下面是Recompose中关于mapProps()高阶组件的部分实现。

    mapProps()接收一个函数，其改变传入值后返回新的值：

    function MyComponent({ bar }: { bar: number }) {
  return 
    {bar}
    ;
}

const MyEnhancedComponent = mapProps(
  ({ foo }) => ({ bar: foo + 1 }),   // 接收原始bar的值，返回加1后的新的bar值
)(MyComponent);

; // bar的值为2

    我们将使用React.ComponentType来定义MyComponent类型和MyEnhancedComponent类型。 React.ComponentType是无状态功能组件和类组件的联合，其中Props是组件的props的定义类型。

    我们希望mapProps()返回一个函数，该函数将React组件作为其第一个也是唯一的参数，并返回一个React组件。

    import * as React from 'react';

function mapProps(): (React.ComponentType) => React.ComponentType {
  return Component => {
    // implementation...
  };
}

    上面我们使用了React.ComponentType定义类型！接下来我们将使用范型函数类型来代替any类型。

    import * as React from 'react';

function mapProps(
  // TODO
): (React.ComponentType) => React.ComponentType {
  return Component => {
    // implementation...
  };
}

    PropsInput和PropsOutput绑定了{}。这意味着PropsInput和PropsOutput必须是对象类型，所以在mapProps()的实现中如果你类型非对象将无法传递PropsInput或PropsOutput。

    现在，为mapperFn添加类型，它接收PropsInput并返回PropsOutput给mapProps()。

    import * as React from 'react';

function mapProps(
  mapperFn: (PropsInput) => PropsOutput,
): (React.ComponentType) => React.ComponentType {
  return Component => {
    // implementation...
  };
}

    现在你可以放心地使用mapProps()来确保你的类型是正确的。

    用高阶组件注入Props

    高阶组件的常见用法是注入一个prop。我们先看看不注入props的高阶组件写法：

    import * as React from 'react';

function injectProp(
  Component: React.ComponentType,
): React.ComponentType {
  // implementation...
}

    这个泛型函数接收一个React组件，返回一个React组件。 要从返回的组件中删除一个prop，我们可以使用$Diff。

    import * as React from 'react';

function injectProp(
  Component: React.ComponentType,
): React.ComponentType<$Diff> {
  // implementation...
}

    这里使用$Diff来表示props的类型，并返回除number类型的foo外的Props中的所有东西。

    注意：如果foo不存在Props中会抛出异常，$Diff<{},{foo: number}>将抛出异常。所以需要与void的联合$Diff <{}, {foo: number | void}>。一个可选的prop不会完全删除foo。$Diff <{foo: number}, {foo?: number}>。

    现在我们可以使用injectProp()来注入foo。

    import * as React from 'react';

function injectProp(
  Component: React.ComponentType,
): React.ComponentType<$Diff> {
  return function WrapperComponent(props: Props) {
    return ;
  };
}

class MyComponent extends React.Component<{
  a: number,
  b: number,
  foo: number,
}> {}

const MyEnhancedComponent = injectProp(MyComponent);

// 尽管MyComponent需要foo，但是这里不是必须传入.
;

    使用React.ElementConfig<>支持defaultProps

    到目前为止，我们编写的高阶组件都必须有defaultProps。为了保留defaultProps的可选性，你可以使用React.ElementConfig。

    function myHOC>(
  WrappedComponent: Component
): React.ComponentType> {
  return props => ;
}

    Redux

    Redux有三个主要部分需要使用flow定义：

    • State
    • Actions
    • Reducers

    Redux state

    定义State与定义其它对象是一样的

    type State = {
  users: Array<{
    id: string,
    name: string,
    age: number,
    phoneNumber: string,
  }>,
  activeUserID: string,
  // ...
};

    确保Redux state不变性

    Redux state 本身意味着不可变：创建一个新的状态对象，而不是改变单个对象的属性。

    你可以通过在整个状态对象中使用“协变”属性将每个属性有效地设置为“只读”来强制执行此操作。

    type State = {
  +users: Array<{
    +id: string
    +name: string,
    +age: number,
    +phoneNumber: string,
  }>,
  +activeUserID: string,
  // ...
};

    而当你尝试改变state中的属性值时，flow会抛出异常

    // @flow
type State = {
  +foo: string
};

let state: State = {
  foo: "foo"
};

state.foo = "bar"; // Error!

    Redux actions

    Redux actions的基本类型是一个带type属性的对象

    type Action = {
  +type: string,
};

    你可能想要为actions定义更具体的类型，那么使用不相交的联合和每个单独的类型。这样flow可以更好地理解reducer。

    type Action =
  | { type: "FOO", foo: number }
  | { type: "BAR", bar: boolean }
  | { type: "BAZ", baz: string };

    Redux creators

    // @flow
type FooAction = { type: "FOO", foo: number };
type BarAction = { type: "BAR", bar: boolean };

type Action =
  | FooAction
  | BarAction;

function foo(value: number): FooAction {
  return { type: "FOO", foo: value };
}

function bar(value: boolean): BarAction {
  return { type: "BAR", bar: value };
}

    Redux thunk actions

    使用Redux thunk actions需要为ThunkAction添加函数Dispatch和GetState。GetState是一个返回Object的函数。 Dispatch接收Action，ThunkAction，PromiseAction和Array 的不相交联合，并可以返回any。

    type Dispatch = (action: Action | ThunkAction | PromiseAction) => any;
type GetState = () => State;
type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
type PromiseAction = Promise;

    然后编写thunk action creator，将ThunkAction的返回类型添加到creator中。

    type Action =
  | { type: "FOO", foo: number }
  | { type: "BAR", bar: boolean };

type GetState = () => State;
type PromiseAction = Promise;
type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
type Dispatch = (action: Action | ThunkAction | PromiseAction | Array) => any;

function foo(): ThunkAction {
  return (dispatch, getState) => {
    const baz = getState().baz
    dispatch({ type: "BAR", bar: true })
    doSomethingAsync(baz)
      .then(value => {
        dispatch({ type: "FOO", foo: value })
      })
    }
}

    Redux reducers

    Reducers接收并合并传入的状态和行为。

    function reducer(state: State, action: Action): State {
  // ...
}

    你还可以default中使用空类型来验证你是否处理了每种类型的操作。

    // @flow
type State = { +value: boolean };
type FooAction = { type: "FOO", foo: boolean };
type BarAction = { type: "BAR", bar: boolean };
type Action = FooAction | BarAction;

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "FOO": return { ...state, value: action.foo };
    case "BAR": return { ...state, value: action.bar };
    default:
      (action: empty);
      return state;
  }
}

    参考文章

    • Using Redux with Flow - Alex Kotliarskyi
    • Redux and Flowtype - Christian de Botton

    类型参考(Type Reference)

    由React模块导出的所有公共Flow类型的参考。

    当使用高级React模式时，React会导出一些可能对你有用的公共类型。以下是每种类型的完整参考，以及一些如何使用它们的例子。
    目录：

    • React.Node
    • React.Element
    • React.ChildrenArray
    • React.ComponentType
    • React.StatelessFunctionalComponent
    • React.ElementType
    • React.Key
    • React.Ref
    • React.ElementProps
    • React.ElementConfig
    • React.ElementRef

    这些类型导出全部来自React模块。 如果你想访问React对象的成员（例如React.Node或React.StatelessFunctionalComponent），并且将React作为ES模块导入，那么你应该把React作为一个命名空间导入：

    import * as React from 'react';

    你也可以使用CommonJS的方式导入React

    const React = require('react');

    你还可以在ES模块环境或CommonJS环境中使用命名的类型导入：

    import type {Node} from 'react';

    注意：当我们使用默认导入的方式导入React:

    import React from 'react';

    你将有权访问React导出的所有值，但是无法访问目录列出的类型！Flow不会将类型添加到默认导出，因为默认导出可以是任何值（如数字）。Flow会将导出的命名类型添加到ES命名空间对象，你可以通过import * as React from 'react'从react获取，因为Flow知道你是否导出了与导出类型具有相同名称的值。除了这种方式，你还可以使用命名类型去访问具体类型如：import type {Node} from 'react'。

    React.Node

    这表示React可以渲染的任何节点。React.Node可以是undefined，null，布尔值，数字，字符串，React元素或可递归数组。

    class MyComponent extends React.Component<{}> {
  render(): React.Node {
    // ...
  }
}
function MyComponent(props: {}): React.Node {
  // ...
}

    这里对render()方法或无状态函数组件的返回类型的定义不是必须的。

    下面是React.Node作为子类型的示例：

    function MyComponent({ children }: { children: React.Node }) {
  return 
    {children}
    ;
}

    所有react-dom JSX内部函数都有React.Node作为它们的子类型。

    ，和其他所有内容。React.Node的定义可以粗略地等同于React.ChildrenArray：

    type Node = React.ChildrenArray>;

    React.Element

    React元素是JSX元素的值的类型：

    const element: React.Element<'div'> = 
    ;

    React.Element是React.createElement()的返回类型。

    React.Element 接收一个单一的类型参数，typeof Component。 typeof Component是React元素的组件类型。对于一个内部元素，typeof Component将是你使用的内在的字符串文字。以下是一些示例：

    (
    : React.Element<'div'>); // OK
(: React.Element<'span'>); // OK
(
    : React.Element<'span'>); // Error: div is not a span.

    typeof Component也可以React 组件或无状态函数组件

    class Foo extends React.Component<{}> {}
function Bar(props: {}) {}

(: React.Element); // OK
(: React.Element); // OK
(: React.Element); // Error: Foo is not Bar

    React.ChildrenArray

    React children数组可以是单个值或嵌套到任何级别的数组。它被设计来与React.Children API一起使用。

    例如，如果你想从React.ChildrenArray获得一个正常的JavaScript数组，请看下面的例子：

    import * as React from 'react';

// 单个值
const children: React.ChildrenArray = 42;
// 任何嵌套级别的数组
const children: React.ChildrenArray = [[1, 2], 3, [4, 5]];

// 使用`React.Children` API 展开数组
const array: Array = React.Children.toArray(children);

    React.ComponentType

    这是类组件或无状态函数组件的联合。这是你要用于接收或返回React组件（如高阶组件或其他公共组件）的函数的类型。

    如何使用React.ComponentType和React.Element 来构造一个具有一组特定props的组件：

    type Props = {
  foo: number,
  bar: number,
};

function createMyElement>(
  Component: C,
): React.Element {
  return ;
}

    React.ComponentType不包含像div或span这样的内在的JSX元素类型。React.ComponentType的定义大致是：

    type ComponentType =
  | React.StatelessFunctionalComponent
  | Class>;

    React.StatelessFunctionalComponent

    无状态函数组件的类型

    type StatelessFunctionalComponent =
  (props: Props) => React.Node;

    React.ElementType

    与React.ComponentType类似，除了它也包含JSX内在函数（字符串）。

    type ElementType =
  | string
  | React.ComponentType;

    React.Key

    React元素的key值类型。它是一个字符串和数字的联合，定义如下：

    type Key = string | number;

    React.Ref

    React元素上的ref属性的类型。React.Ref可以是一个字符串或ref函数。ref函数将接收一个唯一的参数，它将是使用React.ElementRef检索的元素实例，或者是null，因为React在卸载时会将null传递给ref函数。与React.Element一样，typeof Component必须是React组件的类型。React.Ref的定义大致是：

    type Ref =
  | string
  | (instance: React.ElementRef | null) => mixed;

    React.ElementProps

    获取React元素类型的props。类型可以是React类组件，无状态功能组件或JSX内部字符串。此类型用于React.Element上的props属性。与React.Element一样，必须是React组件的类型

    React.ElementConfig

    如React.ElementProps，此方法获取除defaultProps外的组件的props的类型。

    import * as React from 'react';

class MyComponent extends React.Component<{foo: number}> {
  static defaultProps = {foo: 42};

  render() {
    return this.props.foo;
  }
}

// `React.ElementProps<>` 需要有`foo`值即使本身是 `defaultProp`.
({foo: 42}: React.ElementProps);

// `React.ElementConfig<>` 不需要 `foo` 值，因为本身就是`defaultProp`.
({}: React.ElementConfig);

    与React.Element一样，必须是React组件的类型。

    React.ElementRef

    获取React元素的实例类型。对于各种组件类型，实例会有所不同：

    • React类组件将是类实例。所以如果你有类Foo继承React.Component<{}>{}并使用React.ElementRef，那么类型将是Foo的实例。
    • React无状态函数组件没有返回实例，所以React.ElementRef （当Bar是bar(){}）时，会给你undefined的类型。
    • 像div的JSX内联函数会返回DOM实例。React.ElementRef<'div'>是HTMLDivElement。React.ElementRef<'input'>将会是HTMLInputElement。

    与React.Element一样，必须是React组件的类型。

    你可能感兴趣的:(Flow + React/React Native)

    • Vue3项目el-table表格动态合并相同数据单元格(可指定列+自定义合并) KT553 vue.jsjavascript前端elementuihtml前端框架typescript
      一、先看效果：二、完整代码：import{reactive,onMounted}from'vue';//存放所有的表头一定要与tableData一致constcolFields=reactive(["city","name","life","ind","agr","eco"]);//存储合并单元格的开始位置constspanArr=reactive([]);//表格数据consttableData
    • 探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?一篇文章带你全部搞懂 大模型学习路线 大模型人工智能架构llmagentai大模型agi
      探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?前排提示，文末有大模型AGI-CSDN独家资料包哦！文章目录探索前沿AI技术：什么是LLM框架?什么是Agent应用?什么是Workflow架构?摘要引言正文LLM框架：定义与重要性什么是LLM框架?详细的知识点讲解和分析详细的代码案例详细的操作命令Agent应用：智能与自动化什么是Agent应用?知识点讲解代码
    • 深度解析：Python与TensorFlow在日平均气温预测中的应用——LSTM神经网络实战 AI_DL_CODE python神经网络tensorflowLSTM气温预测RNN
      文章目录1.引言1.1研究背景与意义1.2研究目标与问题定义2.概念解析2.1Python语言简介2.2TensorFlow框架概述2.3LSTM神经网络原理3.原理详解3.1时间序列分析基础3.1.1时间序列的组成3.1.2时间序列分析方法3.2LSTM在时间序列分析中的应用3.2.1LSTM的优势3.2.2LSTM的结构3.3日平均气温预测的数学模型3.3.1ARIMA模型3.3.2LSTM模
    • ofa.js：无需打包的MVVM框架，前端开发的轻量之选 前端
      近年来，前端开发领域涌现了许多优秀的框架，如React、Vue和Angular，它们极大地提升了开发效率和代码可维护性。然而，随着项目复杂度的增加，这些框架的学习曲线和构建工具链的复杂性也让许多开发者感到头疼。在这样的背景下，ofa.js应运而生，它号称“无需打包的MVVM框架”，试图为前端开发带来一种全新的体验。那么，ofa.js究竟有何独特之处？它与其他MVVM框架相比又有哪些优势？本文将为你
    • React 19新特性探索：提升性能与开发者体验 程序员
      React作为最受欢迎的JavaScript库之一，不断推出新版本以应对日益复杂的应用需求。React19作为最新的版本，引入了一系列令人兴奋的新特性和改进，旨在进一步提升应用的性能、开发效率和用户体验。本文将深入探讨React19的新特性，包括异步操作管理、文档元数据和样式表支持、ServerComponents与服务器端渲染等，帮助开发者更好地理解和利用这些新特性来构建更强大、更高效的Reac
    • 深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比 前端vue.jsreact
      在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
    • 直击青藏高原数据匮乏难题！浙江大学团队提出GeoAI新模型，解释青藏高原地表热流分布
      在地球科学研究中，地表热流(SurfaceHeatFlow,SHF)作为地球深层热能释放的重要表征，一直备受关注。地表热流不仅是地球内部能量驱动的一面「窗口」，更是揭示地壳热结构、地幔热动力学及地质构造演化的关键参数。通过对地表热流的研究，我们能够深入了解地球内部的热力机制，揭示板块俯冲、地幔上升及裂谷扩张等地质现象背后的动力学过程。尽管地表热流研究在过去几十年中取得了诸多进展，但在全球范围内，某
    • 彻底理解JVM yingcly003 多线程jvm
      先来一张神图jvm运行时数据区，分为这五个部分，让我们来见识下我们的代码是如何飞奔在这几个地方的。指令：程序计数器：记录当前线程的起始地址和偏移量，一看就知道是为了线程挂起后，恢复上下文用的。虚拟机栈：栈关键字，先进后出，主要包括用户存储局部变量表、操作栈、动态链接、方法出口等信息。本地方法栈：栈关键字，jvm底层实现，native方法。数据方法区：线程共享用于存储已被虚拟机加载的类信息、常量、静
    • vue开发：解决el-input-number组件输入数字的时候无法实时触发change事件
      问题：当已经输入数字的时候，还触发了为空的校验，预期是已经输入年龄的时候不会校验，输入框没有值的时候才会触发校验的。在网上查找了资料，el-input-number组件输入数字的时候无法实时触发change事件，需要使用@input.native来触发,一开始使用了也没有效果，后来加了this.$nextTick功能实现了。//解决el-input-number组件输入数字的时候无法实时触发cha
    • Kotlin 协程Flow主要操作符(一) 许三多2020 Kotlin基础android基础Kotlin协程KotlinAndroid协程操作符协程
      Kotlin协程Flow主要操作符（一）1.主要导包2.map转换操作符3.filter过滤操作符4.take限长操作符5.drop丢弃操作符6.flowOn操作符7.onStart操作符8.onCompletion完成操作符9.catch异常收集操作符10.buffer缓冲操作符11.conflate合并操作符参考1.主要导包//协程包implementation"org.jetbrains.k
    • 【HarmonyOS NEXT应用开发】案例36：基于Camera Kit，获取相机流数据传递给native，进行压缩编码 青少年编程作品集 数码相机harmonyos华为华为云华为od缓存
      示例场景：ATS侧启动相机，使用摄像头采集视频流数据，获取相机视频流数据传递到native侧，通过buffer模式将视频编码成MP4文件保存到沙箱路径。方案描述：具体实现步骤可分为：Step1：申请权限，启动相机。Step2:启动录制，获取视频流数据，获取一帧图像转成JPG格式保存到沙箱路径。Step3:视频流数据传递到native侧，进行压缩编码，生成文件保存。步骤一:申请权限，启动相机。需要相
    • [cg] android studio 无法调试cpp问题 DXT00 Graphics笔记总览androidstudioandroidide
      折腾了好久，nativecpp库无法调试问题，原因下面的Deploy需要选Apkfromappbundle!!另外就是指定Debugtype为Dual，并在SymbolDirectories指定nativecpp的so路径UE项目调试：使用AndroidStudio调试虚幻引擎Android项目|虚幻引擎5.5文档|EpicDeveloperCommunity
    • 基于深度学习的推荐系统构建：Movielens 数据集 fresh的转码之路 深度学习人工智能机器学习推荐算法
      基于深度学习的推荐系统构建：Movielens数据集依赖环境代码语言：python3.11.5开发平台：pycharmtensorflow版本：2.18.0MovieLen1M数据及简介MovieLens1M数据集包含包含6000个用户在近4000部电影上的100万条评分，也包括电影元数据信息和用户属性信息。下载地址为：http://files.grouplens.org/datasets/mov
    • [20250119]-前端面试题——React篇 前端
      [20250119]-前端面试题——React篇面试问题记录问题1请简单介绍一下React18有哪些更新。回答：React18的主要更新包括：并发渲染：React18引入了并发渲染（ConcurrentRendering），使得React能在后台进行渲染工作，避免阻塞UI更新，提升性能。自动批处理：React18会自动批处理多次setState更新，减少不必要的渲染，提升性能。useIdHook：
    • Oracle系列---【ORA-01017用户名密码无效】 少年攻城狮 oracle数据库
      1.问题项目启动时，报：ORA-01017用户名密码不对的错误，但是没有报具体哪个库错误，因为我是多数据源的项目。2.解决方案2.1定位到连接数据报错的用户和库名select*fromdba_audit_sessionwhereACTION_NAME='LOGON'ANDRETURNCODE=1017ORDERBYTIMESTAMPDESC;1.OS_USERNAME-客户端操作系统登录用户名,2
    • 【商城系统技术选型】 启山智软 商城 源码 微信小程序小程序java
      商城系统技术选型是一个复杂但至关重要的过程，它直接关系到商城系统的性能、可扩展性、安全性以及用户体验等多个方面。以下是一些关键的技术选型考虑因素：前端技术选型框架选择：React或Vue.js等流行前端框架是不错的选择，它们具有良好的可组件化和可重用性，且社区资源丰富，有大量的插件和工具可供使用，能提高开发效率和界面的交互性。响应式设计：确保系统能自适应不同设备屏幕，如手机、平板、电脑等，提供一致
    • tf.function-＞ AttributeError: ‘double‘ object has no attribute ‘shape‘ 乔宇同学 学习tensorflow
      跑tensorflow时出现的bug,不使用tf.function没问题，一旦挂上装饰符，就报错，报错内容如下：Traceback(mostrecentcalllast):File"D:\Anaconda3\envs\tensorflow2\lib\site-packages\tensorflow_core\python\eager\function.py",line111,in_make_inp
    • LiteFlow决策系统的策略模式，顺序、最坏、投票、权重 后端
      个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview想必大家都有听过或做过职业和性格测试吧，尤其是现在的毕业生，在投了简历之后经常会收到一个什么测评，那些测评真的是又臭又长，做的简直让人崩溃，很多时候都是边骂边做，都什么玩意！？然而，本篇就由此出发，把整个测评作为一个策略的话，其中每一项都是一条规则，通常每一条规则（问答）
    • LiteFlow上下文与组件设计，数据依赖梳理 后端java
      个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview参考如何理解上下文这个概念？|LiteFlow数据上下文的定义和使用|LiteFlow我的业务项目是否适合用LiteFlow？在选择使用LiteFlow之前应该要对其有一些了解，不求熟悉源码，但对于其设计思想还是了解一下的。这将对于后面使用有很大帮助，官方文档和源码都是很
    • 基于LiteFlow的风控系统开源了！指标策略规则 后端
      个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview开篇先道个歉吧，因为大概会让很多人失望了，这次开源仅仅是开源，不是发版，也就是说开源并非非完全体，仅仅是开放源码。如果说1是发版，就算放低一些要求，现在只可能只算是0.2左右，还有很多很多很多事情要做。开源地址：https://github.com/wnhyang/coo
    • 风控系统建设，指标策略规则流程设计，LiteFlow隐式子流程，构造EL和Chain
      个人博客：无奈何杨（wnhyang）个人语雀：wnhyang共享语雀：在线知识共享Github：wnhyang-Overview简介前面有很多文章已经说了，我要利用LiteFlow做风控系统。至于进度嘛，只能尽力而为，毕竟我的惰性也很强。下面是目前Git的提交记录，代码托管在Github和Gitee，但是是私有仓库，因为还不是开放的时候，还有很多要做的。其中能梳理的仅是主流程的TODO都有下面这么
    • 隐语安装部署 HZGame. 大数据数据库架构
      主讲老师：周爱辉讲课链接：第4讲（上）：隐语安装部署-理论篇丨隐私计算实训营第2期_哔哩哔哩_bilibili主讲老师：王祖利讲课链接：第4讲（下）：SecretFlow与Secretnote的安装部署—实操篇丨隐私计算实训营第2期_哔哩哔哩_bilibili一、SecretFlow运行要求：1、环境要求Python>=3.8操作系统：•CentOS7•Anolis8•Ubuntu18.04/20
    • 用TensorFlow.NET搭建一个全连接神经网络 chiyong7717 人工智能c#python
      在本文中，我们将学习如何在C＃中构建神经网络模型计算图。与线性分类器相比，神经网络的关键优势在于它可以分离不可线性分离的数据。我们将实现此模型来对MNIST数据集的手写数字图像进行分类。我们要构建的神经网络的结构如下。MNIST数据的手写数字图像有10个类（从0到9）。该网络具有2个隐藏层：第一层具有200个隐藏单元（神经元），第二层具有10个神经元（称为分类器层）。让我们一步一步地用代码来实现：
    • C#遇见TensorFlow.NET：开启机器学习的全新时代 墨夶 C#学习资料1机器学习c#tensorflow
      在当今快速发展的科技世界里，机器学习（MachineLearning,ML）已经成为推动创新的重要力量。从个性化推荐系统到自动驾驶汽车，ML的应用无处不在。对于那些习惯于使用C#进行开发的程序员来说，将机器学习集成到他们的项目中似乎是一项具有挑战性的任务。但随着TensorFlow.NET的出现，这一切变得不再困难。今天，我们将一起探索如何利用这一强大的工具，在熟悉的.NET环境中轻松构建、训练和
    • .net工作流elsa-触发器 液态不合群 .netios数据库
      什么是触发器可以直接调用流程引擎的IWorkflowRuntime获取IWorkflowClient，然后调用它的CreateAndRunInstanceAsync来启动一个全新的流程。也可以让流程引擎监听一个事件，当事件触发时，自动创建并执行（或借助书签恢复）一个流程实例，这就是触发器。比如定义一个触发器，当指定文件变化时，自动启动一个指定的流程。再比如定义一个触发器，每隔5分钟自动触发执行某个
    • 网络编程（3）reactor事件驱动的机制 jinbaotong 网络windows
      前言在传统的阻塞io模型中，服务器通常使用一个循环来不断监听端口是否有新的套接字连接。当有新的连接请求到来时，服务器会接受连接，并创建一个线程来处理该连接的后续读写操作。这种模型的问题在于，如果当前的请求没有处理完，后续的请求将被阻塞，直到前一个请求处理完成。这导致了服务器的吞吐量低下，无法处理高并发连接。为了解决阻塞io模型的问题，人们想到了使用多线程模型，即一请求一线程。这种模型在一定程度上提
    • python str与bytes之间的转换 upDiff Python
      #bytesobjectb=b"example"#strobjects="example"#strtobytessb=bytes(s,encoding="utf8")#bytestostrbs=str(b,encoding="utf8")#analternativemethod#strtobytessb2=str.encode(s)#bytestostrbs2=bytes.decode(b)转载地
    • Next.js 中为什么 App Router 可能是未来，但 Pages Router 仍然重要？
      Next.js作为一个强大的React框架，为开发者提供了两种路由系统：AppRouter和PagesRouter。这两种路由系统各有特色，适用于不同的场景。本文将深入探讨这两种路由系统的区别、优缺点和使用场景，帮助你做出最佳选择。AppRouter：新一代的路由革命AppRouter是Next.js13引入的新路由系统，它使用app目录来组织路由，带来了许多令人兴奋的新特性。优点：React服务
    • 常见的图形库概览-03-D3.js 入门例子 后端java
      常见的图形库系列常见的图形库概览-00-overview常见的图形库概览-01-Chart.js入门例子常见的图形库概览-03-D3.js入门例子HighCharts交互式图表-01-入门介绍Plotly函数图像绘制ApexCharts图表入门例子Victory图表基于React，适合React项目，支持移动端Recharts入门例子AntVG2入门例子图表库C3.js入门例子图表库GoogleC
    • HighCharts 交互式图表-01-入门介绍 后端java
      常见的图形库系列常见的图形库概览-00-overview常见的图形库概览-01-Chart.js入门例子常见的图形库概览-03-D3.js入门例子HighCharts交互式图表-01-入门介绍Plotly函数图像绘制ApexCharts图表入门例子Victory图表基于React，适合React项目，支持移动端Recharts入门例子AntVG2入门例子图表库C3.js入门例子图表库GoogleC
    • Java实现的简单双向Map，支持重复Value superlxw1234 java双向map
      关键字：Java双向Map、DualHashBidiMap     有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。   数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。   即：既要根据Key找Value，又要根据Value
    • PL/SQL触发器基础及例子 百合不是茶 oracle数据库触发器PL/SQL编程
        触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似 过程函数必须要调用,   一个表中最多只能有12个触发器类型的,触发器和过程函数相似 触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
    • [时空与探索]穿越时空的一些问题 comsci 问题
            我们还没有进行过任何数学形式上的证明,仅仅是一个猜想.....       这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
    • easy ui datagrid上移下移一行 商人shang js上移下移easyuidatagrid
      /** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
    • Java反射 oloz 反射
      本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教 首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
    • springMVC 使用JSR-303 Validation验证 杨白白 springmvc
      JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。 登录需要验证类 public class Login { @NotEmpty
    • log4j 香水浓 log4j
      log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
    • 使用ajax和history.pushState无刷新改变页面URL agevs jquery框架Ajaxhtml5chrome
      表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
    • centos中文乱码 AILIKES centosOSssh
      一、CentOS系统访问 g.cn ，发现中文乱码。 于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。       后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
    • 触发器 baalwolf 触发器
      触发器(trigger)：监视某种情况，并触发某种操作。 触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before 
    • JS正则表达式的i m g bijian1013 JavaScript正则表达式
              g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。         i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。         m:表示
    • HTML5模式和Hashbang模式 bijian1013 JavaScriptAngularJSHashbang模式HTML5模式
              我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode         一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
    • [Maven学习笔记六]Maven生命周期 bit1129 maven
      从mvn test的输出开始说起   当我们在user-core中执行mvn test时，执行的输出如下：   /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
    • 【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
      运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
    • 记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
      　　 需求：从db获取数据然后推送到B         程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。 　　  自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。 　　　service iptables stop
    • 巧用视错觉-UI更有趣 brotherlamp UIui视频ui教程ui自学ui资料
      我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。 视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。 在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
    • 线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
      package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
    • HTTP协议详解 chicony http协议
      引言                                 
    • Scala设计模式 chenchao051 设计模式scala
      Scala设计模式                我的话： 在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
    • 安装mysql daizj mysql安装
      安装mysql   (1)删除linux上已经安装的mysql相关库信息。rpm  -e  xxxxxxx   --nodeps (强制删除)      执行命令rpm -qa |grep mysql 检查是否删除干净   (2)执行命令  rpm -i MySQL-server-5.5.31-2.el
    • HTTP状态码大全 dcj3sjt126com http状态码
      完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
    • asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
      NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
    • C语言中，关键字static的作用 e200702084 C++cC#
      在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。 一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
    • win7/8使用curl geeksun win7
      1.  WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。 下载地址：  http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包   2.  可以给Windows增加c
    • Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
      转载自：   http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
    • Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转java字符串反转栈反转
      注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768   /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
    • 代码实现任意容量倒水问题 home198979 PHP算法倒水
      形象化设计模式实战             HELLO!架构                     redis命令源码解析   倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
    • Druid datasource zhb8015 druid
      推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。 它最重要的特点是：监控、扩展和性能。 下载和Maven配置看这里： http
    • 两种启动监听器ApplicationListener和ServletContextListener spjich javaspring框架
      引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器   ServletContextListener  特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
    • JavaScript Rounding Methods of the Math object 何不笑 JavaScriptMath
          The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(),  Math.floor(), and  Math.round() — handle rounding in differen
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他