前端学习-react组件
2017-01-17 本文已影响32人
熊妹妹
前端学习-react组件
初始化生命周期
- defaultProps在初始化之前来预先定义默认属性。例：SpecialView.defaultProps = { initialCount: 0 };
- constructor(props)，初始化时设置this.state的值
- componentWillMount，render之前调用
- componentDidMount，render之后调用
- componentWillUnmount，界面上移除的时调用
更新组件
条件：state
- state表示组件内部状态，只能在组件内部使用，state只应该用于存储简单的视图状态。
- 当sate改变时render会被调用，页面就会刷新。
- state不能直接修改，应该使用 setState() 方法修改
方法：
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
其他
事件处理
同html事件属性，推荐使用{::this.onClick}的方式绑定函数
DOM操作
- 组件加载之后通过 findDOMNode() 方法拿到组件对应的DOM元素
- 给标签添加ref属性，通过this.refs.name来获取DOM元素
组合
组件内嵌套组件，循环插入组件，这些子组件都可以从props.children传递。
通信
- 父子组件通信通过props从父向子组件传递方法/数据
- 非父子组件通信通过全局事件 Pub/Sub 模式，在 componentDidMount 里面订阅事件，在 componentWillUnmount 里面取消订阅，当收到事件触发的时候调用 setState 更新 UI
