react

Tips

组件是个状态机，修改状态(setState(data, callback))可以触发UI的重新渲染

componentDidMount,组件渲染好了以后会自动调用

this.props不会改变的特性 this.state会改变的特性

自定义组件首字母大写，单html node节点

this.props.children 获取子标签中的内容，React.Children提供了操作方法

dangerouslySetInnerHTML

url rerender

this.refs 指向真实DOM

React在顶层用了事件代理,当组件安装或卸载时都会相应的添加删除mapping,react会自动把方法绑定到组件实例

组件设计原则，父组件可以有state,子组件只做呈现只用props,父组件随state变化rerending的时候子也会rerend?(react组件的包含关系用)

shouldComponentUpdate() return false时组件不渲染

动态组件时可以设置key来区分,key要在父组件动态生成子组件时为子组件设置

mixins 重用公共对象，合并相似方法

Props

getDefaultProps 默认值

{...this.props} 设置所有传递过来的属性

propTypes: {children: React.PropTypes.element.isRequired} 只允许有一个子元素

生命周期

初始化

getDefaultProps() //获取props默认值，之调用一次，实例共享返回值

getInitialState()

componentWillMount() //可以把计算尺寸类的工作放在渲染前

render()

componentDidMount() //this.getDOMNode() 获取生产的DOM

更新

componentWillReceiveProps() //setProps()时调用，可以对props值预处理

shouldComponentUpdate() //setState()之后,React会遍历子组件，将props层层传递，逐个更新， return false 可以阻止更新提高性能

componentWillUpdate() //不要在这里修改props或state

render() //返回的虚拟DOM和缓存的虚拟DOM比较 然后替换

componentDidUpdate() //this.getDOMNode() 获取生产的DOM

销毁

componentWillUnmount()