生命周期函数

到目前为止我们只学习了一种方法来更新UI。调用 ReactDOM.render( ) 方法来改变输出。 在前面博客中有一个时钟的例子代码： function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); 将时钟封装为Clock组件 function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000); 1. 将函数转换为类 可以通过5个步骤将 函数组件 转换为 类组件 创建一个名称扩展为 React