前端学习-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