一、元素渲染: eg. 只渲染已更新局部的数据

<script type="text/babel">

    setInterval(() => {
      var user = {
        username: '王强',
        age: 30,
        date: new Date().toLocaleTimeString()
      }
      ReactDOM.render(<h1 name='guonan' className='red'> 你好世界, {user.date}</h1>,
        document.getElementById('app')
      ), 1000
    })
  </script>

二、根本语法

• React.createClass()

  新版本已不反对

• 函数式组件（无状态组件）

  无生命周期

  <script type="text/babel">
    // 函数时标签
    function Hello(props) {console.log(props)
      return <div>
        <h1>Hello, {props.name}</h1>
        <p> 年龄：{props.age}</p>
      </div>
    }
    ReactDOM.render(
      <Hello name='王强' age='30'/>,
      document.getElementById('app')
    )
  </script>

• React.Component

  <script type="text/babel">
    // React.Component
    class Hello extends React.Component{render(){console.log(this)
        return <h1>Hello {this.props.name}，年龄：{this.props.age}</h1>    
      }
    }
    ReactDOM.render(
      <Hello name='王强' age='30'/>,
      document.getElementById('app')
    )
  </script>

  三、生命周期

  
  

• 组件初始化阶段
• 组件加载阶段
• 数据更新阶段

• 组件销毁阶段

  <script type="text/babel">
    // React.Component
    class Hello extends React.Component{constructor(props){
        // 初始化 props
        super(props)
        // 初始化数据
        this.state = {
          username: '王强',
          age: 550
        }
        console.log('初始化构造函数')
      }
  
      // 数据加载阶段
      componentWillMount(){console.log('组件加载前')
      }
  
      componentDidMount(){console.log('组件加载实现')
      }
  
      // 数据更新阶段
      shouldComponentUpdate(){console.log('数据是否须要更新')
        return true
      }
      componentWillUpdate(){console.log('数据将要更新')
      }
      componentDidUpdate(){console.log('数据更新实现')
      }
  
  
      updateUser = () => {
        this.setState({
          username: '刘华强',
          age: 66
        })
      }
  
      render(){console.log('组件加载或者数据更新')
        return <div> 
            <h1>Hello 姓名：{this.state.username}，年龄：{this.state.age}</h1> 
            <button onClick={this.updateUser}> 数据更新 </button> 
          </div>  
      }
    }
    ReactDOM.render(
      <Hello/>,
      document.getElementById('app')
    )
  </script>

 <script type="text/babel">
    function Login(props) {return <button onClick={props.updateUser}> 登录 </button>
    }

    function Logout(props) {return <button onClick={props.updateUser}> 退出 </button>
    }

    // React.Component
    class App extends React.Component {

      state = {isLogin: false}

      // 数据加载阶段
      componentWillMount() {console.log('组件加载前')
      }

      componentDidMount() {console.log('组件加载实现')
      }

      // 数据更新阶段
      shouldComponentUpdate() {console.log('数据是否须要更新')
        return true
      }
      componentWillUpdate() {console.log('数据将要更新')
      }
      componentDidUpdate() {console.log('数据更新实现')
      }


      updateUser = () => {
        this.setState({isLogin: !this.state.isLogin})
      }

      render() {console.log('组件加载或者数据更新')
        let isLogin = this.state.isLogin
        return <div>
          <h1>Hello World</h1>
          {isLogin ? <Logout updateUser={this.updateUser}/> : <Login updateUser={this.updateUser}/>}
          <button onClick={this.updateUser}> 数据更新 </button>
        </div>
      }
    }
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>

四、React-Router

• 路由的根本配置
• 路由动静配置
• React Hooks & 路由 Hooks