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

我們要認(rèn)識(shí)到，React中的組件其實(shí)是一個(gè)函數(shù)，所以state是函數(shù)內(nèi)部的私有變量，外部其他組件或者方法都是無(wú)法直接訪問(wèn)到內(nèi)部的state。
而state主要被設(shè)計(jì)用于維持組件內(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}
        
組件生成時(shí)間:{this.state.time}
      
    )
  }
}

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

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

3.1.2 修改state值setState

我們已經(jīng)知道了如何初始化組件中的state值，那么接下來(lái)我們來(lái)看看，如何實(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}
          
組件生成時(shí)間:{this.state.time}
          修改值
        
      )
    }
  }

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

這就要來(lái)看看，React中的setState方法。

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

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

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}
          
組件生成時(shí)間:{this.state.time}
          修改值
        
      )
    }
  }

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

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

現(xiàn)在出現(xiàn)了一個(gè)問(wèn)題，如果我們需要通過(guò)等待setState修改完成的值之后，應(yīng)該如何處理？React為我們的setState提供了第二個(gè)參數(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}
          
組件生成時(shí)間:{this.state.time}
          修改值
        
      )
    }
  }

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

現(xiàn)在我們來(lái)進(jìn)行一次腦暴，可不可以直接修改state值呢?因?yàn)槲覀冊(cè)谧钤缰苯訉?duì)state修改的時(shí)候，React并未關(guān)閉這個(gè)對(duì)象的set方法。那么我們可否直接通過(guò)修改state來(lái)進(jìn)行渲染呢？React中的一個(gè)方法為我們解決了這個(gè)疑問(wè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);
        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}
          
組件生成時(shí)間:{this.state.time}
          修改值
        
      )
    }
  }

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

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

在某些場(chǎng)景下面，我們可能是新的值是基于上一次的值推算而來(lái)，所以React提供了setState傳遞進(jìn)方法來(lái)進(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}
        
組件生成時(shí)間:{this.state.time}
        修改值
      
    );
  }
}

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

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

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

3.2.1 接收并渲染props值

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

import React, { PureComponent } from "react";

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

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

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

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}
        
組件生成時(shí)間:{this.state.time}
        修改值
        
      
    );
  }
}

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

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

這樣，組件內(nèi)部可以通過(guò)props讀取到value值了。不過(guò)React的組件傳遞中有一個(gè)很有趣的屬性children，這個(gè)的用處傳遞組件包含的內(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||"暫無(wú)數(shù)據(jù)"}，children:{this.props.children}
      
    );
  }
}

最終顯示效果就是這樣的

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