摘要：而主要被設計用于維持組件內部私有狀態。初始化初始化需要在中進行。對于的定義為請求修改某個數據，而的實現則是將對變量的修改放入一個修改隊列中，在一個循環之后進行批量更新結果深入點涉及的更新機制。推出了與版本之后推出來的就是為了解決這些問題的。

我們要認識到，React中的組件其實是一個函數，所以state是函數內部的私有變量，外部其他組件或者方法都是無法直接訪問到內部的state。
而state主要被設計用于維持組件內部私有狀態。

3.1.1 初始化state

初始化state需要在class中constructor進行。

import React, { PureComponent } from "react"

export default class index extends PureComponent {
  constructor(props){
    super(props)
    this.state = {name:"demo react",time:new Date()}
  }
  render() {
    return (
      

        Hello world React!{this.state.name}
        
組件生成時間:{this.state.time}
      
    )
  }
}

在這個代碼中，我們初始化了name,time兩個state值。一旦state初始化完成，我們就可以在render中進行訪問。

使用npm run dev命令運行，并在瀏覽器中打開查看吧。

3.1.2 修改state值setState

我們已經知道了如何初始化組件中的state值，那么接下來我們來看看，如何實現修改state的值

  import React, { PureComponent } from "react"

  export default class index extends PureComponent {
    constructor(props){
      super(props)
      this.state = {name:"demo react",time:+new Date()}
    }
    handleUpdateName () {
      this.state.time = (+new Date())
    }
    render() {
      return (
        

          Hello world React!{this.state.name}
          
組件生成時間:{this.state.time}
          修改值
        
      )
    }
  }

有些動作快的同學，第一個想法就是如此修改組件中的state值，但是值得玩味的是，值的確是修改成功了，但是，并沒有實時體現在界面上。這究竟是怎么回事呢？

這就要來看看，React中的setState方法。

React對于setState的定義為請求React修改某個數據，而React的實現則是將對變量的修改放入一個修改隊列中，在一個循環之后進行批量更新結果（深入點涉及VDom的更新機制）。所以，這里會造成一個問題，就是setState數據之后立刻進行讀取，可能你讀取到的數據，并非是已經被更新過的有效值。

setState有三種修改數據的方式，讓我們來一個一個嘗試。

3.1.2.1 直接賦值

  import React, { PureComponent } from "react"

  export default class index extends PureComponent {
    constructor(props){
      super(props)
      this.state = {name:"demo react",time:+new Date()}
    }
    handleUpdateName () {
      // this.state.time = (+new Date())
      console.log("修改前的值",this.state.time)
      this.setState({time:+new Date()})
      console.log("修改后的值",this.state.time)
      let that = this
      setTimeout(function(){
          console.log("當前state值",that.state.time)
      })
    }
    render() {
      return (
        

          Hello world React!{this.state.name}
          
組件生成時間:{this.state.time}
          修改值
        
      )
    }
  }

點擊按鈕，控制臺輸出了不同的值，可以觀察到setState是采用異步隊列模式的。

3.1.2.2 賦值完成等待同步完成之后執行回調

現在出現了一個問題，如果我們需要通過等待setState修改完成的值之后，應該如何處理？React為我們的setState提供了第二個參數callback。

  import React, { PureComponent } from "react"

  export default class index extends PureComponent {
    constructor(props){
      super(props)
      this.state = {name:"demo react",time:+new Date()}
    }
    handleUpdateName () {
      // this.state.time = (+new Date())
      console.log("修改前的值",this.state.time)
      this.setState({time:+new Date()}，(function(){
          console.log("當前state值",that.state.time)
      })
      console.log("修改后的值",this.state.time)
    }
    render() {
      return (
        

          Hello world React!{this.state.name}
          
組件生成時間:{this.state.time}
          修改值
        
      )
    }
  }

再次運行，并且點擊按鈕。我們可以看到控制臺輸出的值是跟第一個方法是一致的。

現在我們來進行一次腦暴，可不可以直接修改state值呢?因為我們在最早直接對state修改的時候，React并未關閉這個對象的set方法。那么我們可否直接通過修改state來進行渲染呢？React中的一個方法為我們解決了這個疑問。

  import React, { PureComponent } from "react"

  export default class index extends PureComponent {
    constructor(props){
      super(props)
      this.state = {name:"demo react",time:+new Date()}
    }
    handleUpdateName () {
        console.log("修改前的值", this.state.time);
        this.state.time = (+new Date())
        console.log("修改后的值", this.state.time);
        console.log("當前state值", this.state.time);
        this.forceUpdate()
    }
    render() {
      return (
        

          Hello world React!{this.state.name}
          
組件生成時間:{this.state.time}
          修改值
        
      )
    }
  }

上面這個代碼僅僅用于腦暴，參考，不要在生產環境中使用，因為這個會造成React渲染算法與各種Hook失效，造成全局重新渲染。

3.1.2.3 通過原始數據進行更新

在某些場景下面，我們可能是新的值是基于上一次的值推算而來，所以React提供了setState傳遞進方法來進行推算處理。

import React, { PureComponent } from "react";

export default class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { name: "demo react", time: +new Date() };
  }
  handleUpdateName() {
    console.log("修改前的值", this.state.time);
    let that = this;
    this.setState(oldData => {
      return { time: oldData.time + 1000 };
    });
    console.log("修改后的值", this.state.time);
    setTimeout(function() {
      console.log("當前state值", that.state.time);
    });
  }
  render() {
    return (
      

        Hello world React!{this.state.name}
        
組件生成時間:{this.state.time}
        修改值
      
    );
  }
}

最后說一點，就是setState是淺拷貝,如果是結構比較深層的對象，很多同學會采用JSON.string()這種來進行深拷貝，這樣的操作雖然說是可以的，但是非常影響性能。

React推出了immutable與15版本之后推出來的PureComponent就是為了解決這些問題的。有興趣的同學可以搜索一下相關資料進行拓展閱讀。

我們知道，在函數中有帶參數的方法，那么props其實就是傳入方法中的參數。并且在React中props是只讀屬性。在使用場景上，是由父組件向子組件傳遞值的時候使用的。

3.2.1 接收并渲染props值

我們首先創建一個可以接收props值的組件。

import React, { PureComponent } from "react";

export default class index extends PureComponent {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      

        {this.props.value||"暫無數據"}
      
    );
  }
}

接著，我們修改Index.js引用這個組件。

import React, { PureComponent } from "react";
import Content from "./content.js"
export default class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { name: "demo react", time: +new Date() };
  }
  handleUpdateName() {
    this.setState({time:+new Date()})
  }
  render() {
    return (
      

        Hello world React!{this.state.name}
        
組件生成時間:{this.state.time}
        修改值
        
      
    );
  }
}

這里大家有一點要注意，在React中，所有的組件名稱第一個字母都必須大寫，這是為了與html標簽區分出來。

如何向子組件傳值呢？就像給html標簽增加屬性一樣。

這樣，組件內部可以通過props讀取到value值了。不過React的組件傳遞中有一個很有趣的屬性children，這個的用處傳遞組件包含的內容。

繼續修改引入組件的代碼，如下

// index.js
主體Children

import React, { PureComponent } from "react";

export default class index extends PureComponent {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      

        {this.props.value||"暫無數據"}，children:{this.props.children}
      
    );
  }
}

最終顯示效果就是這樣的

原文地址:https://www.yodfz.com/detail/...