1、计时器示例

• 函数组件

  JavaScript

  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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  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)

• 将函数组件转换成class组件

  JavaScript

  class Clock2 extends React.Component { render () { return ( <div> <h1>Hello, world!</h1> <h2>It is { this.props.date.toLocaleTimeString() }.</h2> </div> ) } } function tick2 () { ReactDOM.render( <Clock2 date={ new Date() } />, document.getElementById('root2') ) } setInterval(tick2, 1000)

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  class Clock2 extends React.Component {   render () {     return (       <div>         <h1>Hello, world!</h1>         <h2>It is { this.props.date.toLocaleTimeString() }.</h2>       </div>     )   } }   function tick2 () {   ReactDOM.render(     <Clock2 date={ new Date() } />,     document.getElementById('root2')   ) }   setInterval(tick2, 1000)

  • 1.创建一个同名的 ES6 class，并且继承于 React.Component。

  • 2.添加一个空的 render() 方法。

  • 3.将函数体移动到 render() 方法之中。

  • 4.在 render() 方法中使用 this.props 替换 props。

  • 5.删除剩余的空函数声明。

2、State计时器

• 在多组件应用程序中，组件被销毁时释放所占用的资源是非常重要的

• 挂载(mount)：

  • 组件第一次被渲染到DOM中

  • componentDidMount()

• 卸载(unmount)：

  • DOM中组件被删除时

  • componentWillUnmount()

• class字段

  • this.props和this.state是React本身设置的，有特殊含义

  • timerID是额外字段，可随意添加不参与数据流

• JavaScript

  class Clock3 extends React.Component { constructor (props) { super(props) this.state = { date: new Date() } } // 挂载(mount) componentDidMount () { this.timerID = setInterval( () => this.tick(), 1000 ) } // 卸载(unmount) componentWillUnmount () { clearInterval(this.timerID) } tick () { this.setState({ date: new Date() }) } render () { return ( <div> <h1>Hello, world!</h1> <h2>It is { this.state.date.toLocaleTimeString() }.</h2> </div> ) } } ReactDOM.render( <Clock3 />, document.getElementById('root3') )

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  class Clock3 extends React.Component {   constructor (props) {     super(props)     this.state = { date: new Date() }   }     // 挂载(mount)   componentDidMount () {     this.timerID = setInterval(       () => this.tick(),       1000     )   }     // 卸载(unmount)   componentWillUnmount () {     clearInterval(this.timerID)   }     tick () {     this.setState({       date: new Date()     })   }     render () {     return (       <div>         <h1>Hello, world!</h1>         <h2>It is { this.state.date.toLocaleTimeString() }.</h2>       </div>     )   } }   ReactDOM.render(   <Clock3 />,   document.getElementById('root3') )

3、State

• State 与 props 类似

• State 是私有的

• 完全受控于当前组件

• 不可直接修改State

  • this.setState({ comment: 'Hello' })

4、State的更新可能是异步的

• 因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

  JavaScript

  // Wrong this.setState({ counter: this.state.counter + this.props.increment, })

  1 2 3 4

  // Wrong this.setState({   counter: this.state.counter + this.props.increment, })

• 解决方法：让setState()接收一个函数，而不是一个对象
  JavaScript

  // Correct this.setState((state, props) => ({ counter: state.counter + props.increment }))

  1 2 3 4

  // Correct this.setState((state, props) => ({   counter: state.counter + props.increment }))

5、State的更新会被合并

• 浅合并：

  • this.setState({comments}) 完整保留了 this.state.posts， 但是完全替换了 this.state.comments

• JavaScript

  constructor(props) { super(props); this.state = { posts: [], comments: [] } } componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this.setState({ comments: response.comments }); }); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  constructor(props) {   super(props);   this.state = {     posts: [],     comments: []   } } componentDidMount() {   fetchPosts().then(response => {     this.setState({       posts: response.posts     });   });     fetchComments().then(response => {     this.setState({       comments: response.comments     });   }); }

6、数据是向下流动的

• state的私有性：

  • state 为局部的或是封装的

  • 除了拥有并设置了它的组件，其他组件都无法访问。

  • 从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件

• JavaScript

  function App () { return ( <div> <Clock3 /> <Clock3 /> <Clock3 /> </div> ) } ReactDOM.render( <App />, document.getElementById('root4') )

  1 2 3 4 5 6 7 8 9 10 11 12 13

  function App () {   return (     <div>       <Clock3 />       <Clock3 />       <Clock3 />     </div>   ) } ReactDOM.render(   <App />,   document.getElementById('root4') )