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} 只允许有一个子元素

生命周期

初始化

1. getDefaultProps() //获取props默认值，之调用一次，实例共享返回值
2. getInitialState()
3. componentWillMount() //可以把计算尺寸类的工作放在渲染前
4. render()
5. componentDidMount() //this.getDOMNode() 获取生产的DOM

更新

1. componentWillReceiveProps() //setProps()时调用，可以对props值预处理
2. shouldComponentUpdate() //setState()之后,React会遍历子组件，将props层层传递，逐个更新， return false 可以阻止更新提高性能
3. componentWillUpdate() //不要在这里修改props或state
4. render() //返回的虚拟DOM和缓存的虚拟DOM比较 然后替换
5. componentDidUpdate() //this.getDOMNode() 获取生产的DOM

销毁

componentWillUnmount()