React笔记

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

二、基本语法

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

  <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

/detail/:2021

Redirect/404

JS中路由跳转

• 路由Hooks ( 函数式组件中使用 )