React组件
React组件
1. 核心概念:
props
state
props
getDefaultProps
state
状态机
setState 触发组件自动重新renderUI
getinitialState
划分props和state的原则:让组件尽可能的少状态。
2. 组件生命周期
三个阶段:初始化 运行中 销毁
初始化
getDefaultProps 只调用一次,实例之间共享引用
getInitialState 初始化每个实例特有的状态
componentWillMount
render 只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
componentDidMount 可以修改DOM
运行中
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁
comonentWillUnMount
3. 事件处理
合成事件和原生事件
合成事件的好处:
自销毁
可以直接使用this.state()
原生事件
注意在componentWillUnmount中解除绑定removeEventListener
参数传递
bind(this, ...args);
4. DOM操作
getDOMNode()
Refs
不要在render或者render之前访问refs
不要滥用refs
5. 组合组件
6.组件间通讯
父子之间通信
非父子组件通讯
使用全局事件Pub/Sub模式,在componentDidMount里面订阅事件,在componentWillUnmount里取消订阅
7.Mixins