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

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

3.1.1 初始化state

初始化state需要在class中constructor進(jìn)行。

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中進(jìn)行訪問。

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

3.1.2 修改state值setState

我們已經(jīng)知道了如何初始化組件中的state值，那么接下來我們來看看，如何實(shí)現(xiàn)修改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}
          修改值
        
      )
    }
  }

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

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

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

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

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("當(dāng)前state值",that.state.time)
      })
    }
    render() {
      return (
        

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

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

3.1.2.2 賦值完成等待同步完成之后執(zhí)行回調(diào)

現(xiàn)在出現(xiàn)了一個問題，如果我們需要通過等待setState修改完成的值之后，應(yīng)該如何處理？React為我們的setState提供了第二個參數(shù)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("當(dāng)前state值",that.state.time)
      })
      console.log("修改后的值",this.state.time)
    }
    render() {
      return (
        

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

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

現(xiàn)在我們來進(jìn)行一次腦暴，可不可以直接修改state值呢?因?yàn)槲覀冊谧钤缰苯訉tate修改的時候，React并未關(guān)閉這個對象的set方法。那么我們可否直接通過修改state來進(jìn)行渲染呢？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("當(dāng)前state值", this.state.time);
        this.forceUpdate()
    }
    render() {
      return (
        

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

上面這個代碼僅僅用于腦暴，參考，不要在生產(chǎn)環(huán)境中使用，因?yàn)檫@個會造成React渲染算法與各種Hook失效，造成全局重新渲染。

3.1.2.3 通過原始數(shù)據(jù)進(jìn)行更新

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

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("當(dāng)前state值", that.state.time);
    });
  }
  render() {
    return (
      

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

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

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

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

3.2.1 接收并渲染props值

我們首先創(chuàng)建一個可以接收props值的組件。

import React, { PureComponent } from "react";

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

        {this.props.value||"暫無數(shù)據(jù)"}
      
    );
  }
}

接著，我們修改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}
        修改值
        
      
    );
  }
}

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

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

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

繼續(xù)修改引入組件的代碼，如下

// index.js
主體Children

import React, { PureComponent } from "react";

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

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

最終顯示效果就是這樣的

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