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

時間 2020-02-07

原文原文鏈接

前言

上一篇文章中，咱們講到了JSX的一些用法和注意事項，此次咱們來說react中最基礎也是特別重要的內容：組件。這篇文章包含組件的如下內容：狀態、屬性、生命週期。react

正文

一.組件演變

W3C標準委員會制定的規範：Web Components.每一個自定義組件能夠定義本身對外提供的屬性、方法、還有事件。，內部能夠像寫一個頁面同樣，專一於實現功能來完成對組件的封裝。
1.Web Components主要由四部分組成
（1）HTML templates 定義了以前模板的概念
（2）Custom Elements 定義了組件的展示形式
（3）shadow DOM 定義了組件的做用域範圍、能夠囊括樣式
（4）HTML Imports 提出了新的引入方式
git

二.React組件的構建

React的本質就是關心元素的構成，React組件即爲組件元素。組件元素被描述爲純粹的JSON對象，意味着可使用方法和類來構建。React組件基本上有三部分組成：屬性、狀態和生命週期方法。github

React組件能夠接收參數，也可能有自身狀態。一旦接收到的參數或者自身狀態有所改變，React組件就會執行相應的生命週期方法，最後渲染。api

React組件的構建方法
（1）React.createClass
用React.createClass構建組件是最傳統、兼容性最好的方法。
示例代碼以下：異步

const Button = React.createClass({
    getDefaultProps(){
        return{
            color:'blue',
            text:'confirm'
        };
    },
    render(){
        const {color,text} = this.props;
        return(
            <button className={'btn btn-${color}'}>
                <em>{text}</em>
            </button>
        );
    }    
});

(2)ES6 Classes函數

import React,{Component} from 'react'

class Button extends Component{
constructor(props){
    super(props);
}
static defaultProps = {
    color:'blue',
    text:'confirm'
}
render(){
    return (
    <button className={'btn btn-${color}'}>
        <em>{text}</em>
    </button>
    );
}

}this

（3）無狀態組件
使用無狀態函數構建的組件就稱爲無狀態組件。
示例代碼以下：spa

function Button({
    color:'blue',
    text:'confirm'
}){
    return (
        <button className = {'btn btn-${color}'}>
            <em>{text}</em>
        </button>
    );
};

注意事項：
（1）無狀態組件只傳入props和context兩個參數；也就是說它不存在state,也沒有生命週期方法。
（2）無狀態組件不會像上面兩種方法同樣在調用時會建立新的實例，它建立時始終保持了一個實例。設計

三.React數據流

1.簡單介紹：
（1）在React中，數據是自頂向下單向流動，即從父組件到子組件。
（2）若是頂層組件初始化 props，那麼React會向下遍歷整棵組件樹，從新嘗試渲染全部相關的子組件。
（3）而state只關心每一個組件本身內部的狀態，這些狀態只能在組件內變化。code

2.state
每個組件都有本身的state，它存在於組件的內部。
當組件內部使用庫內置的setSate方法時，最大的表現行爲就是該組件會嘗試從新渲染。
值的注意的是，setState是一個異步方法，一個生命週期內的全部setSate方法會合並操做。

3.prop
props是properties的簡寫，它是react用來組件間聯繫的一種機制，通俗地講就像方法的參數同樣。
React的單向數據流主要的流動通道就是prop。prop自己是不可變的。組件的props必定來自默認屬性或經過父組件傳遞而來。react爲props提供了默認配置，經過defaultProps靜態變量的方式定義。

子組件prop:
在React中有一個重要的內置 Prop——children，它表明組件的子組件集合。React.Children是官方提供的一系列操做children的方法。它提供諸如：map forEach count等使用函數，能夠爲咱們處理子組件提供便利。

propTypes:
propTypes用於規範props的類型與必需的狀態。若是組件定義了propTypes，那麼在開發環境下就會對組件的props值進行類型檢查，若是不匹配，就會在控制檯裏報warning.

4.prop與state的區別
本標題下內容來源：https://github.com/yunxifd/re...

官方文檔中已經給出了怎樣判斷數據是否應爲組件的state的方法：
一、數據是否從父組件經過props傳遞給子組件？若是是，它可能不是state。
二、數據是否隨着時間的推移不發生變化？若是是，它可能不是state。
三、數據是否可以經過其餘state或props計算所得？若是是，它就不是state。

進一步探索，參考文檔Working with Data in React: Properties & State

props 是組件的輸入值，主要用來初始化組件的state和渲染組件。實例化組件後，props是不可變的。props只能在組件實例化的時候，設置值。所以，當組件re-rendered的時候，react會比較new和old props 來決定哪些DOM須要更新。

state 表示由組件更改的數據，一般是經過與用戶的交互來更改的。爲了實現state的修改，須要註冊事件處理程序到相應的DOM元素上。當事件發生時，將更新後的值是從DOM中檢索，並通知組件。在組件可使用state，組件必須經過getInitialState函數初始化。一般狀況下，該getInitialState函數初始化狀態使用static value，props，或其餘數據存儲。

總結：
props 是不可變的
state 是可變的

四.組件生命週期

1.組件的掛載

import React,{Component,PropTypes} from 'react'
class App extends React.Component{
    static propTypes{
        //...
    };
    static defaultProps={
        //...
    };
    constructor(props){
        super(props);
        this.state={
            //...
        };
    }
    componentWillMount(){
        //...
    }
    componentDidMount(){
        //...
    }
    render(){
        <div>this is a demo </div>
    }
}

getDefaultProps:
對於組件類來講，這個方法只會被調用一次。對於那些沒有被父輩指定props屬性的新建實例來講，這個方法返回的對象可用於爲實例設置默認的props值

getInitialState:
對於組件的每一個實例來講，這個方法的調用次數有且只有一次。在這裏你有機會初始化每個實例的state。與getDefaultProps不一樣的是，每次實例建立時，該方法都會調用一次。在這個方法裏，你已經能夠訪問到 this.props

componentWillMount:
該方法會在首次渲染以前被調用，這也是在render方法調用前能夠修改組件state的最後一次機會。

render:
在這裏你會建立一個虛擬的DOM，用於表示組件的輸出。對於一個組件來講， render是惟一一個必須的方法。
render方法返回的結果不是真正的DOM,而是一個虛擬的表現，react隨後會和它真是的DOM作對比，來判斷是否有必要作出修改。

componentDidMount:
在render方法成功調用而且真是的DOM已經被渲染以後，你能夠在componentDidMount內部經過this.getDOMNode()方法訪問到它。

2.組件的卸載

componentWillUnmount：
該方法會在組件移除以前被調用，讓你有機會作一些清理工做。咱們常執行一些清理方法，好比事件回收或者清除定時器。

3.數據更新過程

數據更新指的是父組件向下傳遞props或許組件自身執行setState方法時發生的一系列更新動做。

class App extends React.Component{
    componentWillReceiveProps(nextProps){
        //this.setSate({})
    }
    shouldComponentUpdate(nextProps,nextSate){
        //return true
    }
    componentWillupdate(preProps,preSate){
        //...
    }
    componentDidUpdate(){
        //...
    }
    render(){
        return(
            <div>this is a demo </div>
        )
    }
}

componentWillReceiveProps:
在任意時刻，組件的props均可以經過父輩組件來更改。出現這種狀況時，該方法將會被調用，它也將得到更改props對象以及更新state的機會。

shouldComponentUpdate:
它接收須要更新的prop和state，讓開發者增長必要的條件判斷，讓其在須要時更新，不須要時不更新。所以，當該方法返回false的時候，組件不在向下執行生命週期方法。

componentWillUpdate:
組件會接收新的props和state進行渲染以前調用該方法。
注意：你不能夠在該方法中更新props和state。而應該藉助componentWillReceiveProps在運行時更新
state.

componentDidUpdate:
該方法給咱們提供了更新已經渲染好的DOM的機會。

五.組件設計原則

詳細請見：https://github.com/react-comp...（1）職責清晰多個組件協同完成一件事情，而不是一個組件替其餘組件完成本該它本身完成的事情。（2）扁平訪問組件推薦使用狀態來控制交互和顯示，若是須要顯示訪問，也儘可能實行扁平訪問，即只能夠調用其 children 的方法。（3）信息冗餘儘可能避免信息冗餘，若是某個 state 能夠由其餘 state 計算獲得，那麼就刪除這個 state（4）api 儘可能和已知概念保持一致若是 api 能夠和已知概念保持一致，那麼就用已知的 api（5）使用標籤嵌套儘可能使用標籤嵌套而不是屬性配置。（6）避免使用 ref使用父組件的 state 控制子組件的狀態而不是直接經過 ref 操做子組件