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()