组件建的共享状态交给组件最近的公共父节点保管。通过props把状态传递给子组件,这样就可以在组件之间共享数据啦。通过props获取到数据,这种行为叫做状态提升。
组件挂载
把构造完成的组件塞入页面的过程称为组件的挂载。
初始化constructor() ==> 挂载到页面render()
组件挂载中的几个周期函数
Mount 增加、爬、上升
constructor ()
组件初始化的时候调用,数据初始化...
componentWillMount()
数据请求(Ajax数据拉取),定时器处理
render函数调用前执行
componentDidMount()
动画开始、
render函数调用后执行
componentWillUnmount()
清场工作、删除定时器等
组件删除前调用
组件更新
由于setState导致重新渲染组件的过程的生命周期
shouldComponentUpdate(nextProps, nextState)
判断组件是否会重新渲染。性能优化
componentWillReceiveProps(nextProps)
组件从父组件接受到新的props之前调用
其实父组件调用render方式,就会触发这个函数。
componentWillUpdate()
组件开始重新渲染前进行调用
componentDidUpdate()
组件渲染到Dom以后开始调用
Ref可以拿到Dom元素
组件也可以添加上ref 标签,尽量避免使用ref,维护起来不是很方便。
componentDidMount()
{
this.input.focus()
}
<input ref={(input) => this.input = input} />
componentDidMount()
{
console.log(el)
}
<h1 ref={(el) => this.el= el} /></h1>
props.children
组件可以直接传HTML标签,在组件内部可以通过this.props.children拿到数据。
Style
样式文件 直接传对象可以接受props,state
<h1 style = {{color:this.state.color}} >C</h1>
子组件修改props方法,子组件调用父组件函数,修改state。