一、 元素渲染: 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