React state與props學習筆記

lk20150415 發布于2019-08-19 18:41 / 329人閱讀

摘要：組件的狀態與屬性組件本質上是狀態機，輸入確定，輸出一定確定。這是在事件處理函數中和請求回調函數中觸發更新的主要方法。

組件的狀態與屬性

組件本質上是狀態機，輸入確定，輸出一定確定。組件把狀態與結果一一對應起來，組件中有state與prop（狀態與屬性）。

屬性(props)是由父組件傳遞給子組件的；

狀態(state)是子組件內部維護的數據，當狀態發生變化的同時，組件也會進行更新。當狀態發生轉換時會觸發不同的鉤子函數，從而讓開發者有機會做出相應。

props 屬性的用法

鍵值對：值可以有多種形式：

字符串："XiaoWang";

求值表達式 {123}、{"XiaoWang"};

數組{[1,2,3]};

變量{variable};

函數求值表達式{function}（不推薦，如果需要函數可以多帶帶把函數提取出來然后多帶帶調用函數）;

展開語法{...props}：

React會自動把對象中的屬性和值當做屬性的賦值

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name1 + " "this.props.name2};
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:"Tim",
            name2:"John",
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return 
        
        

        
        
    },
});
ReactDom.render(,document.body);

setProps：

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name ? this.props.name : "World"};
    },
});
var instance = React.render(,document.body);
instance.setProps({name:"Tim"});

setProps(object nextProps[, function callback])可以設置組件的屬性。這個方法已經過時了（與replaceProps等一樣），不久將被刪除。這個方法不支持ES6類組件React.Component擴展。

propTypes

組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,//這個title是必須的，而且它的值必須是字符串
  },
  render: function() {
     return  {this.props.title} ;
   }
});

getDefaultProps

getDefaultProps 方法可以用來設置組件屬性的默認值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : "Hello World"
    };
  },

  render: function() {
     return  {this.props.title} ;
   }
});
ReactDOM.render(,document.body);

this.props.children

this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點。

state

組件在運行時需要修改的數據就是狀態，this.state 是會隨著用戶互動而產生變化的特性。組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI。

state工作原理

常用的通知 React 數據變化的方法是調用 setState(data, callback)。這個方法會合并（merge） data 到 this.state，并重新渲染組件。渲染完成后，調用可選的 callback 回調。大部分情況下不需要提供 callback，因為 React 會負責把界面更新到最新狀態。

getInitialState

object getInitialState()
getInitialState 方法用于定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。在組件掛載之前調用一次。返回值將會作為 this.state 的初始值。

setState

setState(object nextState[, function callback])
合并 nextState 和當前 state。這是在事件處理函數中和請求回調函數中觸發 UI 更新的主要方法。另外，也支持可選的回調函數，該函數在 setState 執行完畢并且組件重新渲染完成之后調用。this.setState 方法用于修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

replaceState

replaceState(object nextState[, function callback])
類似于 setState()，但是刪除之前所有已存在的 state 鍵，這些鍵都不在 nextState 中。

哪些組件應該有 State？

大部分組件的工作應該是從 props 里取數據并渲染出來。但是，有時需要對用戶輸入、服務器請求或者時間變化等作出響應，這時才需要使用 State。

嘗試把盡可能多的組件無狀態化。這樣做能隔離 state，把它放到最合理的地方，也能減少冗余，同時易于解釋程序運作過程。

常用的模式是創建多個只負責渲染數據的無狀態（stateless）組件，在它們的上層創建一個有狀態（stateful）組件并把它的狀態通過 props 傳給子級。這個有狀態的組件封裝了所有用戶的交互邏輯，而這些無狀態組件則負責聲明式地渲染數據。

參考文章

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

《深入react技術棧》學習筆記（二）初入React世界

摘要：用于規范的類型與必需的狀態。表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現的修改，需要注冊事件處理程序到相應的元素上。當事件發生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數初始化狀態使用，，或其他數據存儲。前言上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態、屬...

MRZYD 2019-08-20 14:47 評論0 收藏0
React學習筆記3：用es2015（ES6）重寫CommentBox

摘要：新搭建的個人博客，本文地址學習筆記用重寫在一開始的時候配置中我們就加入了的支持，就是下面的配置，但之前的學習筆記都使用的完成，所以專門作一篇筆記，記錄使用完成創建相關文件修改，增加該入口文件修改，引入該文件做個簡單的測試，看下瀏覽器全部用來新搭建的個人博客，本文地址：React學習筆記3：用es2015（ES6）重寫CommentBox在一開始的時候webpack配置中我們就加入了e...

selfimpr 2019-08-19 17:30 評論0 收藏0
React學習筆記—UI交互

摘要：事件機制實現了自己的一套事件代理和處理機制，這套機制是符合標準的。事件代理并沒有將事件處理添加到相應的每個節點上。當啟動時，在根節點上監聽所有的事件，并管理事件到相應節點的映射。 props 先看個簡單的例子： var HelloWorld = React.createClass({ render: function () { return ( ...

spacewander 2019-08-21 10:29 評論0 收藏0
react 學習筆記

摘要：理論學習產出就是全局的數據源添加事件處理函數訂閱數據清除事件處理函數任何時候數據發生改變就更新組件函數接受一個組件參數返回另一個新組件注意訂閱數據使用最新的數據渲染組件注意此處將已有的屬性傳遞給原組件理論學習 + demo產出 showImg(https://segmentfault.com/img/bV95Vr?w=1600&h=1200); showImg(https://seg...

tigerZH 2019-08-22 17:02 評論0 收藏0
React學習筆記—簡易信息管理，實現CUD

摘要：需求利用實現一個簡易的信息管理系統。寫的不太好，歡迎熟悉的大神來找茬。真心感激分析編寫就是不斷構建組件的過程，首先要根據需求進行的劃分編碼服務端沒有用到服務器，采用了數據模擬的方式添加信息時自增長頁面組件刪除更新新增渲染需求利用React實現一個簡易的信息管理系統。showImg(https://segmentfault.com/img/bVloJ6); 寫的不太好，歡迎...

MSchumi 2019-08-22 10:56 評論0 收藏0