【React系列】状态(State)和生命周期
状态(State)什么是状态状态(state) 和 属性(props) 类似,都是一个组件所需要的一些数据集合,但是它是私有的,并且由组件本身完全控制,可以认为它是组件的“私有属性(或者是局部属性)”。 函数式组件转化为类组件如果想要使用状态(State)的话,则需要我们在构建组件的时候是要以类组件为形式的。
例如: class Clock extends React.Component { render() { return ( <div> <h1>Hello,world!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ); } } 上面示例就是一个简单的类组件Clock。 类组件中添加State1) 替换 render() 方法中的 this.props.date 为 this.state.date: class Clock extends React.Component { render() { return ( <div> <h1>Hello,world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } 2) 添加一个 类构造函数(class constructor) 初始化 this.state: class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello,world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
constructor(props) { super(props); *** this.state = {date: new Date()}; } 3) 移除 <Clock /> 元素中的 date 属性: ReactDOM.render( <Clock />,document.getElementById('root') ); 通过上面的步骤就可以实现添加State到类组件了,最终结果: class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello,world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />,document.getElementById('root') ); 如何修改StateState的初始化和常规的赋值形式是一样的,但是如果我们需要更新相关数据的话,则需要通过setState方法进行修改,如: this.setState({ date: new Date() }); 正确地使用 State(状态)关于如何正确使用State以及setState() 有三个方面需要注意: 不要直接修改 state(状态)正如上面提到的如何修改State那样,在初始化后,如果修改的话只能通过setState方法进行修改。 state(状态) 更新可能是异步的React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。 因为 this.props 和 this.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。 // 错误 this.setState({ counter: this.state.counter + this.props.increment,}); 要弥补这个问题,使用另一种 setState() 的形式,它接受一个函数而不是一个对象。这个函数将接收前一个状态作为第一个参数,应用更新时的 props 作为第二个参数: // 正确 this.setState((prevState,props) => ({ counter: prevState.counter + props.increment })); state(状态)更新会被合并当你调用 setState(), React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时,可以单独更新其中的一个,此时会进行“差分”更新,不会影响其他的属性值。 生命周期方法什么是生命周期
而组件的生命周期则是这个组件从创建到销毁的一个过程。在这个过程中会有不同的阶段,从而会产生一些对应的生命周期函数来供我们使用,以便能够进行一些渲染、更新等处理。 可以简单分为几个阶段:
数据向下流动无论作为父组件还是子组件,它都无法获悉一个组件是否有状态,同时也不需要关心另一个组件是定义为函数组件还是类组件。 这就是 state(状态) 经常被称为 本地状态 或 封装状态的原因。 它不能被拥有并设置它的组件 以外的任何组件访问。 一个组件可以选择将 state(状态) 向下传递,作为其子组件的 props(属性): <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 这通常称为一个“从上到下”,或者“单向”的数据流。任何 state(状态) 始终由某个特定组件所有,并且从该 state(状态) 导出的任何数据 或 UI 只能影响树中 “下方” 的组件。 如果把组件树想像为 props(属性) 的瀑布,所有组件的 state(状态) 就如同一个额外的水源汇入主流,且只能随着主流的方向向下流动。 结语在 React 应用中,一个组件是否是有状态或者无状态的,被认为是组件的一个实现细节,随着时间推移可能发生改变。你可以在有状态的组件中使用无状态组件,反之亦然。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |