前端学习-react组件

前端学习-react组件

初始化生命周期

1. defaultProps在初始化之前来预先定义默认属性。例：SpecialView.defaultProps = { initialCount: 0 };
2. constructor(props)，初始化时设置this.state的值
3. componentWillMount，render之前调用
4. componentDidMount，render之后调用
5. componentWillUnmount，界面上移除的时调用

更新组件

条件：state

• state表示组件内部状态，只能在组件内部使用，state只应该用于存储简单的视图状态。
• 当sate改变时render会被调用，页面就会刷新。
• state不能直接修改，应该使用 setState() 方法修改

方法：

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

其他

事件处理

同html事件属性，推荐使用{::this.onClick}的方式绑定函数

DOM操作

1. 组件加载之后通过 findDOMNode() 方法拿到组件对应的DOM元素
2. 给标签添加ref属性，通过this.refs.name来获取DOM元素

组合

组件内嵌套组件，循环插入组件，这些子组件都可以从props.children传递。

通信

• 父子组件通信通过props从父向子组件传递方法/数据
• 非父子组件通信通过全局事件 Pub/Sub 模式，在 componentDidMount 里面订阅事件，在 componentWillUnmount 里面取消订阅，当收到事件触发的时候调用 setState 更新 UI