本章与下一章分别介绍React组件的状态(State)和生命周期(Lifecycle)的概念。
先通过一个示例来说明为啥需要用到React组件的状态(state);还是之前那个时钟的示例:
function showTime() { const element = ( <div> <h1>反清复明</h1> <p>现在时间是: {new Date().toLocaleTimeString()}</p> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(showTime, 1000);
但是上述并不是一个真正可复用的React组件,而是定时更新罢了,耦合性过高,没有进行封装。而React组件的状态(State)和生命周期(LifeCycle)则非常适合解决这些事情。
首先从封装闹钟的外观开始:
function Clock(props) { return ( <div> <h1>反清复明</h1> <p>现在时间是: {props.date.toLocaleTimeString()}</p> </div> ); } function showTime() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(showTime, 1000);
但是上述的这种写法,依然还是需要一个计时器来每秒更新。理想情况下,最好可以只编写一次代码,便可以让Clock组件自我更新,这就是用到状态(state)来实现。state与props类似,但是state是完全私有的,其作用域就是当前组件。跟函数的局部变量的感觉有点像。
不过得先把函数组件转换成类组件:
class Clock extends React.Component { render() { return ( <div> <h1>反清复明</h1> <p>现在时间是:{this.props.date.toLocaleTimeString()}</p> </div> ); } }
再在类组件中添加局部的state,并在构造对象时获取当前时间:
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>反清复明</h1> <p>现在时间是:{this.state.date.toLocaleTimeString()}</p> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') );
但是,上述运行所得只是一个静止的闹钟,下一章则会介绍通过生命周期(lifecycle)来实现动态的闹钟。