小生愛

        

                    const log = (...value) => console.log(...value)
                    
                    import React from 'react';
                    import ReactDOM from 'react-dom';

                    const Input = React.createClass({
                      // render 首次渲染之前调用
                      componentWillMount () {
                        // 页面没渲染完 输出 undefined
                        log( document.querySelector('input') )
                      },

                      // 渲染完成后调用
                      componentDidMount () {
                        log( document.querySelector('input') )
                      },

                      // 组件被更新前调用一次 返回更新后的 props || state的值
                      componentWillUpdate (nextProps, nextState) {
                        log(nextProps, nextState)
                      },

                      // 组件被更新后调用一次 返回更新前的 props || state的值
                      componentDidUpdate (prevProps, prevState) {
                        log(prevProps, prevState)
                      },

                      // 组件从挂载点移除时调用
                      componentWillUnmount () {
                        log('移除')
                      },

                      /**
                       *  定义组件是否重新渲染 (必须有true|| false返回值 否则报错)
                          该方法在componentWillUpdate 之前调用
                            true: 重新渲染
                            false: 不重新渲染
                       */
                      
                      shouldComponentUpdate (nextProps, nextState) {
                        log(nextProps, nextState, '--')
                        return true
                      },

                      getInitialState () {
                        return {
                          value: '小花',
                          age: 25
                        }
                      },

                      handleChange (event) {
                        this.setState({
                          value: event.target.value
                        })
                      },

                      handleAge () {
                        this.setState({
                          age: 26
                        })
                      },

                      closeDOM () {
                        // 把节点从挂载点移除
                      },

                      render () {
                        log('更新')
                        let value = this.state.value
                        let age = this.state.age
                        return (
                          <div className="js-dom">
                            <input type="text" value={value} onChange={this.handleChange} />
                            <input type="text" value={age} onChange={this.handleAge} />
                            <input type="button" onClick={this.closeDOM} />
                            <p>{value}</p>
                          </div>
                        )
                      }
                    })

                    ReactDOM.render(
                      <Input />,
                      document.querySelector('.content')
                    )