国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 手稿 - Component state

dcr309duan / 725人閱讀

摘要：實例在線實例定義寫在函數中，是一個對象。一般情況下需要指定默認值，預防拋使用在組件中通過訪問組件對象屬性的方式。把這種組件也稱為非受控性組件。通過提供了方法，來實現的修改。回調非控組件在線實例受控組件在線實例推薦閱讀手稿

Component state

實例：

import React, { PureComponent } from "react";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { time: "" };
  }

  componentDidMount() {
    setInterval(() => {
      const now = new Date();
      let { time } = this.state;
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconde = now.getSeconds();
      time = `${`0000${year}`.slice(-4)}-${`00${month}`.slice(-2)}-${`00${day}`.slice(-2)} ${`00${hours}`.slice(-2)}:${`00${minutes}`.slice(-2)}:${`00${seconde}`.slice(-2)}`
      this.setState({ time });
    }, 1000);
  }

  render() {
    return (
      
{this.state.time}

    )
  }
}

Timer 在線實例

定義

寫在constructor函數中，是一個Object對象。一般情況下需要指定默認值，預防拋undefined.

使用

在組件中通過訪問組件對象屬性的方式。直接獲取：this.state.time.
我們通常會先獲取state數據，再渲然到頁面，例如：

  render() {
    const {time} = this.state;
    return (
      
{time}

    );
  }
setState

先看一段代碼：

import React, {PureComponent} from "react";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {name: "world"};
  }

  render() {
    const {name} = this.state;
    return (
      

        
        
Holle, {name}!

      

    );
  }
}

數據單和向性

input與div中直接顯示name的內容,但是，在input中直接輸入內容，div的顯示不會改變。

把這種組件也稱為非受控性組件。

setState

通過React提供了setState方法，來實現state的修改。

我們只要將上述的非受控性組件修改為受控性組件即可，如下：

  this.setState({name: e.target.value})} />

使用setState方法需要注意以下幾點：

異步

onChange () {
  this.setState({name: "hasChanged"})
  console.log(this.state.name === "hasChanged"); //false
}

合并

  this.state = {name: "xiaoshouyi", address: "beijing"};

  this.setState({address: "xi an"});

  //not
  //this.setState({...this.state, addree: "xi an"});
  //但是這種方式在對象修改的時候非常有用。

  console.log(this.state) //{name: "xiaoshouyi", address: "xi an"}

類似與Object.assgin()。

回調

this.setState({name: "changed"}, () => {
  console.log(this.state.name); // changed
});

非控組件 在線實例

受控組件 在線實例

推薦閱讀《React 手稿》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99087.html

相關文章

  • React手稿之高階組件

    摘要：示例使用場景代碼復用類似版本之前的。多個組件同用一段代碼，或者同樣的方法時，可以使用。示例在線示例抽象和更改可以通過包裹的組件公共抽象出來。可以通過包裹的組件傳遞修改添加等的示例渲然劫持條件渲然。示例反向繼承返回的高階組件類繼承了。 Higher-Order Components HOC 不是React的標準API。 HOC 是一個函數。 HOC 返回一個Component。 示例...

    dkzwm 評論0 收藏0

  • React手稿之 React-Saga

    摘要：相當于一個放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發一個時，立即執行。也就是在與之間做一個事情，比如異步獲取數據等。使用了中的功能，避免了像的回調地獄。把放入中最后再實現相就的即可在線示例推薦閱讀手稿 Redux-Saga redux-saga 是一個用于管理應用程序副作用（例如異步獲取數據，訪問瀏覽器緩存等）的javascript庫，它的目標是讓副作用管理更容易，執行更...

    notebin 評論0 收藏0

  • React手稿之State Hooks of Hooks

    摘要：官方也陳述，接下來的的工作會投入到中。從目前官方的文檔可以看出，從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發布的版本中有該功能，想體驗該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。 官方也陳述，接下來的90%的工作會投入到React ...

    DC_er 評論0 收藏0

  • React.memo

    摘要：介紹之前，先了解一下和。不同是沒有實現，而通過和的淺比較實現了。如果組件的和相同時，的內容也一致，那么就可以使用了這樣可以提高組件的性能。例如當和中有復雜數據結果時，不好使用。示例這種方式依然是一種對象的淺比較，有復雜對象時無法。 介紹React.memo之前，先了解一下React.Component和React.PureComponent。 React.Component React...

    Meils 評論0 收藏0

  • React手稿之 React-Redux

    摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

    Freelander 評論0 收藏0

發表評論

0條評論

閱讀需要支付1元查看
<