React API 组件

学无止尽,闲无止尽,人如果没有梦想,跟咸鱼有什么分别。

React 不支持 if else 支持三元运算符 {x=1?true:false}​;

React 有个state  可以getInitialState()用来初始化一些状态

setState()更改一些状态​

React 有个getDefaultProps 用来初始化属性 ​

可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上​

ex:

this.props.属性

​用propsTypes 来进行属性验证:

propsTypes:{

name:React.propTypes.string.required​,

optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),​

// 可以是多个对象类型中的一个optionalUnion:React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number,React.PropTypes.instanceOf(Message)]),

// 指定类型组成的数组optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number),

// 指定类型的属性构成的对象optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number), // 特定 shape 参数的对象

​optionalObjectWithShape: React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}),

// 任意类型加上 `isRequired` 来使 prop 不可空。

​requiredFunc: React.PropTypes.func.isRequired,

// 不可空的任意类型

​requiredAny: React.PropTypes.any.isRequired,

}​

  • 设置状态:setState
  • 替换状态:replaceState
  • 设置属性:setProps
  • 替换属性:replaceProps
  • 强制更新:forceUpdate
  • 获取DOM节点:findDOMNode
  • 判断组件挂载状态:isMounted

​setState()不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount

: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  • componentWillReceiveProps

在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。

  • componentWillUpdate

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate

在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount

在组件从 DOM 中移除的时候立刻被调用。

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。

handleClick:function(){

// 使用原生的 DOM API 获取焦点

​this.refs.myInput.focus();​

}​.

哎 现在越来越讨厌学习了。也不知道为什么 希望自己能找找原因 调整心态。​

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注