91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

React中state和props

發布時間:2020-07-28 07:23:23 來源:網絡 閱讀:645 作者:hoolwall 欄目:開發技術

    React是Facebook內部的一個資源類庫,主要是做前端UI的組件式開發,它使用一種新的方式來處理瀏覽器的DOM,不需要手動的更新DOM,也不需要自己管控哪部分DOM需要更新,或者不要更新。React有自己的一套算法來控制如何最小的改動DOM來更新整個應用程序。虛擬DOM還有一個好處就是可以解決瀏覽器的兼容問題,可以將虛擬DOM根據瀏覽器的不同而翻譯為相對應的語言。

    state是React用來控制更新應用的狀態,每次state的值發生變化,就會觸發render,render的返回值有變化,虛擬DOM就會更新,真實的DOM也會跟著變化,最終就是我們在瀏覽器中看到的變化。需要注意的是React是單向數據流綁定。單向數據流比雙向數據流綁定要輕的多,所以其性能更高。其刷新時的代碼為:

this.setState({items: data});//items為剛開始定義的state變量,data為要賦給items的值

    props是React在整個組件樹中傳遞數據用的,可以把props理解為只讀。

比如:

Send為子控件,要將父控件中的item傳入子控件,父控件中定義為:

<Send/ item = {this.state.item}>

子控件中接收:

let item = this.props.item;


這些都是一些最基礎的用法:

下面給出一個完整的例子:

import React from 'react';
import Uri from '../../uri/TestUri';
import axios from 'axios';
import ChildList from './ChildList';

export default React.createClass({
    getInitialState: function() {   //設置初始狀態item
      return { items : [] };
    },
    getJson: function () {
      let url = Uri.getTestUri;
      return axios.get(url);     //axios是屬于nodejs前后端調用
    },
    componentDidMount: function () {  //React中的生命周期,為頁面渲染完后執行,還有其他的
      this.getJson()                  //componentWillMount,componentWillReceiveProps等等
      .then((result) =>               
      {
        this.setState({ items: result.data }); //設置state值,設置完成后瀏覽器重新更新
        //console.log(result.data[1]);
      })
      .catch((response) => { console.log(response); });
    },
    render: function(){
      return (
          <ChildList items={this.state.items} /> //給子組件ChildList 傳值
      );
    },
});

今晚被傻蛋打攪,浪費很多時間,就不寫了...

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

湘潭县| 四川省| 临漳县| 贞丰县| 靖安县| 樟树市| 扬中市| 宿松县| 神池县| 南丹县| 浮山县| 绥阳县| 策勒县| 廉江市| 海林市| 临朐县| 延津县| 澄城县| 温宿县| 斗六市| 静乐县| 曲沃县| 黔南| 高邑县| 建昌县| 许昌县| 扶绥县| 永宁县| 鲁甸县| 政和县| 逊克县| 临西县| 望谟县| 宜黄县| 临安市| 南皮县| 松潘县| 衡阳县| 若羌县| 青岛市| 高雄市|