学无止尽,闲无止尽,人如果没有梦想,跟咸鱼有什么分别。
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();
}.
哎 现在越来越讨厌学习了。也不知道为什么 希望自己能找找原因 调整心态。