React學習筆記—UI交互

spacewander 發布于2019-08-21 10:29 / 1067人閱讀

摘要：事件機制實現了自己的一套事件代理和處理機制，這套機制是符合標準的。事件代理并沒有將事件處理添加到相應的每個節點上。當啟動時，在根節點上監聽所有的事件，并管理事件到相應節點的映射。

props

先看個簡單的例子：

var HelloWorld = React.createClass({
    render: function () {
        return (
            {this.props.content}
        )
    }
});

React.render(
    ,
    document.body
);

看代碼就很容易理解：通過this.props我們可以拿到組件使用時的屬性。稍微改變下代碼，我們打印出this.props瞅瞅：

var HelloWorld = React.createClass({
    render: function () {
        return (
            {JSON.stringify(this.props)}
        )
    }
});

React.render(
    ,
    document.body
);

瀏覽器頁面效果：

可以看出this.props就是組件的屬性集合，稍微改下代碼，再來看看：

var HelloWorld = React.createClass({
    render: function () {
        return (
            {JSON.stringify(this.props)}
        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

瀏覽器頁面效果：

這個時候多了一個children的屬性，React將組件的子節點封裝到了children屬性中，如果想獲取到子節點的內容，可以這么寫：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
            {
                this.props.children.map(function (child) {
                        return child;
                })}
            
        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

當子節點只有一個的時候直接通過this.props.children獲取子節點。當子節點的個數大于1，this.props.children是一個數組。

綜上我們可以看出，React將節點屬性和子節點都封裝到props當中，我們可以通過this.props獲取到。在React的設定中，props是不可變的，當props屬性確定后，我們不應該再去手動修改它。

一個陷阱

看下這個代碼：

var Hello = React.createClass({
    render: function () {
        return (
            
        )
    }
});

React.render(
    
        content
    ,
    document.body
);

咋一看是不是覺得頁面渲染出來應該是這個效果：


    content

實際上渲染出來是這樣的：

看頁面的渲染效果:我們要找到根節點，關注它的render方法的返回值。至于使用時的嵌套結構，看完props應該明白，這些都是組件屬性，想要使用的話，請通過this.props.children.

state

state是同UI交互最重要的屬性，看個簡單的例子，點擊按鈕，切換按鈕的顏色：

var ColorButton = React.createClass({
    getInitialState: function () {
        return {bColor: "green"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        this.setState({bColor: this.state.bColor === "green" ? "red" : "green"});
    }
});

React.render(
    ,
    document.body
);

getInitialState是用來初始化state，handleClick是用來處理我們點擊事件的。

事件機制

React實現了自己的一套事件代理和處理機制，這套機制是符合W3C標準的。通過這套機制，React有兩個很重要的特點：

自動綁定

所有的事件處理函數當中的this指向組件的實例。如果想要拿到當前操作的DOM，通過參數event獲取。

var ColorButton = React.createClass({
    getInitialState: function () {
        return {name: "button"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        console.log(this.state);
        console.log(event.target);
    }
});

React.render(
    ,
    document.body
);

事件代理

React并沒有將事件處理添加到相應的每個節點上。當React啟動時，在根節點上監聽所有的事件，并管理事件到相應節點的映射。當組件mounted或者unmounted時，事件將會被添加到映射關系或者被刪除。我感覺，有點jQuery的事件代理的意思：

#糟糕的寫法
$("li").on("click", function () {
    //todo
});

//好點的寫法
$("ul").on("click", "li", function () {
    //todo
});

狀態機

React將UI簡單的看作狀態機。看UI看作各種各樣的狀態，并在各種狀態間切換，很容易保持UI的一致性。在React中，你只要改變組件的狀態，就會重新渲染UI，React會在最有效的方式下更新DOM。

state工作原理

通過調用setState(data, callback)方法，改變狀態，就會觸發React更新UI。大部分情況下，我們不需要提供callback函數。React會自動的幫我們更新UI。

后面在好好看看這個callback的功能和調用時機。

什么樣的組件該有state

大部分的組件應該從props屬性中獲取數據并渲染。但有的時候組件得相應用戶輸入，同服務器交互，這些情況下會用到state。React的官方說法是：盡可能的保持你的組件無狀態化。為了實現這個目標，得保持你的狀態同業務邏輯分離，并減少冗余信息，盡可能保持組件的單一職責。

React官方推薦的一種模式就是：構建幾個無狀態的組件用來渲染數據，在這些之上構建一個有狀態的組件同用戶和服務交互，數據通過props傳遞給無狀態的組件。我的理解大概就是這樣：

var RenderComponent = React.createClass({
    render: function () {
        return (
            
                {
                    this.props["data-list"].map(function (item) {
                        return ({item})
                    })
                }
            
        )
    }
});


var StateComponent = React.createClass({
    getInitialState: function () {
        return {list: ["xxx", "yyy"]};
    },
    render: function () {
        return (
            
                
                
            

        )
    },
    handleClick: function () {
        this.setState({list: [1, 2, 3]});
    }
});

React.render(
    ,
    document.body
);

state應該包含什么樣的數據

UI交互會導致改變的數據。

state不應包含什么樣的數據

計算過的數據

組件

從props復制的數據

state應保含最原始的數據，比如說時間，格式化應該交給展現層去做。

組件應在render方法里控制。

GPU云服務器云服務器 ui交互 ui交互設計 ui交互設計是什么學習筆記

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

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

好程序員React精品項目全集：商城管理后臺（視頻+源碼+筆記）

摘要：今天給大家帶來了好程序員實戰項目商城管理后臺。配合項目學習會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰項目課程介紹好程序員項目本項目是一個使用開發的商城系統的管理后臺，里面登錄判斷，接口調用，數據展示和編輯，文件上傳等后臺功能。眾所周知，項目經驗對于一個程序員變得越來越重要。在面...

李世贊 2021-11-11 16:55 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0
React學習筆記—組件組合

摘要：說的通俗點如果組件出現在了組件的方法中，那么組件就是所有者。所有者和被所有者關系是針對組件的，父子關系是針對結構的。子調節調節發生在更新的過程中。帶有狀態的子節點對大部分組件來說，問題不大。應該加在組件上，而不是標簽上。關注分離我們在編程的時候碰到相同的功能，可以通過抽出公共方法或者類來實現復用。當我們構建新的組件的時候，盡量保持我們的組件同業務邏輯分離，將相同功能的組件抽出一個...

xiaodao 2019-08-22 10:56 評論0 收藏0
React state與props學習筆記

摘要：組件的狀態與屬性組件本質上是狀態機，輸入確定，輸出一定確定。這是在事件處理函數中和請求回調函數中觸發更新的主要方法。組件的狀態與屬性組件本質上是狀態機，輸入確定，輸出一定確定。組件把狀態與結果一一對應起來，組件中有state與prop（狀態與屬性）。屬性(props)是由父組件傳遞給子組件的；狀態(state)是子組件內部維護的數據，當狀態發生變化的同時，組件也會進行更新。當...

lk20150415 2019-08-19 18:41 評論0 收藏0
React學習筆記—Why React?

摘要：官方說法注本人英語二十六級是和用來創建用戶界面的庫。很多人將認為是中的。怎么說呢現在的自己就是個跟風狗啊，什么流行先學習了再說，再看看能不能應用在具體項目上。暫時先停下的學習，坐等。不過學習的腳步還是跟不上潮流的發展速度啊。 Why React? 官方說法注：本人英語二十六級 React是Facebook和Instagram用來創建用戶界面的JavaScript庫。很多...

余學文 2019-08-21 10:28 評論0 收藏0