React 開發你一定要知道

wizChen 發布于2019-08-23 10:42 / 2600人閱讀

摘要：組件的的單向數據流，主要的流動管道就是，本身是不可變的。是上的特殊屬性在常規的數據流之外強制修改子元素被修改的可以是組件實例，或者一個元素可以在元素上和類組件上添加，組件在加載時將元素傳入的回調，在或者這些生命周期前執行。

JSX 基本語法

1.定義標簽時只允許被一個標簽包裹
const component = nameage

2.標簽一定要閉合


3.DOM元素屬性class和for
class屬性改為className   

for屬性改為htmlFor 
 

4.自定義html屬性，要使用data-前綴


5.屬性值需要使用表達式，只要用{}替換""即可
const person = 

6.html轉義
React會將所有要顯示到DOM的字符串轉義，防止XSS
react提供了dangerouslySetInnerHTML屬性，謹慎使用

React 數據流

在React中，數據是自頂向下單向流動的，即從父組件到子組件，這條原則讓組件之間的關系變的簡單且可預測。state和props是React組件中重要的概念，如果頂層組件初始化props，那么React會向下遍歷整棵組件樹，重新嘗試渲染所有相關的子組件。而state只關心每個組件自己內部的狀態，這些狀態只能在組件內部改變，把組件看成一個函數，那么它接受了props作為參數，內部由state作為函數的內部參數，返回一個Virtual DOM的實現。

組件的state
組件的state是組件的內部狀態，state的變化最終將反映到組建UI的變化，我們在組件的構造方法constructor中通過this.state定義組件的初始狀態，并通過this.setState方法改變組件狀態（也是改變組件狀態的唯一方式），進而組件的UI也會隨之重新渲染。

1.setState是一個異步方法，一個生命周期內所有的setState方法會合并操作。

組件的props

1.React的單向數據流，主要的流動管道就是props，
props本身是不可變的。當我們試圖改變props的原始值時，
React會報出類型錯誤警告，組件的props一定來自于默認屬性或者通過父組件傳遞而來。

2.React為props同樣提供了默認的配置。
通過defaultProps靜態變量的方式來定義，當組件被調用的時候，默認值保證渲染后始終有值。
    static defaultProps = {
        classPrefix: "tabs",
        onChange: () => {}    
    }
    
3.proTotypes用于規范props的類型與必需的狀態。
如果組件定義了propTypes，那么在開發環境下，就會對組件的props的值類型作檢查。
    static propTypes = {
        classPrefix: propTypes.String
    }
    
4.子組件的props，在React中有一個重要且內置的props---children，
它代表組件的子組件集合，children可以根據傳入子組件的數量來決定是否是數組類型。

5.用function prop與父組件通訊，
父組件可以通過子組件的prop傳遞給子組件一個回調函數，
子組件需要改變父組件數據時，調用這個回調函數即可。

React生命周期

組件從創建到被銷毀的過程稱為組件的生命周期。通常，React組件的生命周期可以被分為三個階段：掛載階段、更新階段、卸載階段

1.掛載階段

constructor
這是es6 class的構造方法，組件被創建時，
會首先調用組件的構造方法，
這個構造方法接收一個props參數，props是父組件中傳入的屬性對象

componentWillMount
該方法在組件被掛載到DOM前調用，且只會被調用一次

render
這是定義組件時唯一必要的方法，該方法根據props和state返回一個react元素
，這個元素用于描述組件的UI，注意render并不負責組件的實際渲染工作，
它只是返回一個UI的描述，真正渲染出頁面的DOM的工作有React負責。

componentDidMount 
組件被掛載到DOM后調用，且只會被調用一次

2.更新階段

componentWillReceiveProps(nextProps)
這個方法只在props引起的組件更新過程中，才會被調用。
state引起的組件更新并不會觸發該方法的執。

shouldComponentUpdate(nextProps, nextState)
這個方法決定組件是否繼續執行更新過程，當方法返回true時（默認返回值），
組件會繼續更新過程。返回false時，組件更新過程停止。

componentWillUpdate(nextProps, nextState)
該方法在組件render調用前調用。

render
該方法根據props和state返回一個react元素，如掛載階段

componentDidUpdate(preProps, preState)
組件更新后被調用，可以作為操作DOM的地方。兩個參數分別是組件更新前的props和state

3.卸載階段

componentWillUnmount
組件被卸載之前調用，此處可以用于清除定時器等，取消監聽事件等，避免引起內存泄露。

React refs

ref是react上的特殊屬性
在常規的數據流之外強制修改子元素
被修改的可以是react組件實例，或者一個dom元素
可以在dom元素上和類組件上添加ref，react組件在加載時將dom元素傳入ref的回調，在componentDidMount 或者componentDidUpdate 這些生命周期前執行。

1.dom元素上添加ref

...
handleClick(){
    this.nameInput.focus();
}

render(){
    return(
        
            {this.nameInput = input;}}
            
        
    );
}

2.react組件上添加ref

// App.js
otherFunction(){
    this.pager.changePage(5);
}
....
render(){
    return(
        {this.pager = page;}} />
    );
}

// Pager.js
...
changePage(page){
    this.setState({
        page : page
    });
}
...
// 在父組件中使用ref給某一子組件傳值，并且子組件調用setState修改自身的狀態，
// 該子組件會重新渲染一次，父組件中的其他組件不會重新render

3.ref和函數式組件

function MyTest(){
    let textInput = null;

    function handleClick(){
        textInput.focus();
    }

    return(){
        
            {textInput=input}/>
            
        
    }
}

子組件對父組件暴露dom節點
// App.js
...
render(){

return(
    _{this.inputRef = el; } />
);}

}

// Sub.js
...
render(){

return(){
    
        
    
}

}

React forceUpdate

默認情況下，當組件的 state 或 props 改變時，組件將重新渲染。如果你的 render() 方法依賴于一些其他數據，你可以告訴 React 組件需要通過調用 forceUpdate() 重新渲染。
調用 forceUpdate() 會導致組件跳過 shouldComponentUpdate() ，直接調用 render()。這將觸發子組件的正常生命周期方法，包括每個子組件的 shouldComponentUpdate() 方法。
forceUpdate就是重新render。有些變量不在state上，但是你又想達到這個變量更新的時候，刷新render；或者state里的某個變量層次太深，更新的時候沒有自動觸發render。這些時候都可以手動調用forceUpdate自動觸發render

// Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "tom";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return ({this.name});
    }
}

// App.js
class App extends React.Component{

    handleClick(){
        this.subRef.refChangeName("jack");
    }
    render(){
        return (
            _{{this.subRef = sub;}} />});
    }
}

GPU云服務器云服務器你知道你應該知道數據分析知道你百度一下你就知道了

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

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

關于React的一些小知識

摘要：關于的一些小知識這里搜集了幾個關于的零散知識，有些雖然知道了也不一定能幫你寫出更好的代碼，但能夠擴展一下知識。被設置為而不是是由于早期的會在某些情況下刪除基本類型的屬性。關于React的一些小知識這里搜集了幾個關于react的零散知識，有些雖然知道了也不一定能幫你寫出更好的代碼，但能夠擴展一下知識。以下全部來自于https://overreacted.io，需要更詳細解釋的可以去...

tuomao 2019-08-23 16:29 評論0 收藏0
玩轉 React（一）- 前言

摘要：本人計劃編寫一個針對中初級前端開發者學習的系列教程玩轉。使用的原因是新的語言規范開發效率更高代碼更優雅，尤其是基于開發的項目。其次也是目前特別流行的一個前端框架，截止目前，上有將近萬，國內一二線互聯網公司都有深度依賴開發的項目。本人計劃編寫一個針對中初級前端開發者學習 React 的系列教程 - 《玩轉 React》。文章更新頻率：每周 1 ~ 2 篇。目錄玩轉 React（...

waltr 2019-08-21 16:43 評論0 收藏0
React 深入系列２：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列2：組件分類 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使...

Karrdy 2019-08-22 16:05 評論0 收藏0
使用React 應當注意的幾個地方

摘要：都會造成錯誤，注意一定一定嚴格的用，所以我建議直接復制我的。因為用的話他會轉義代碼，寫不寫其實一個樣。不可避免的，構建肯定是要用到的。這個時候一般用的是在外面保存然后里面調用第二個坑更隱蔽。目標人群獻給熟悉基礎的React語法的剛接觸React的同學~ 如果你已經寫過半年以上的React那也不用看了，畢竟我水平并不高 Whats React React 是一個不存在的網絡公司Fac...

高璐 2019-08-19 17:11 評論0 收藏0
typescript - 一種思維方式

摘要：怎么影響了我的思考方式對前端開發者來說，能強化了面向接口編程這一理念。使用的過程就是在加深理解的過程，確實面向接口編程天然和靜態類型更為親密。電影《降臨》中有一個觀點，語言會影響人的思維方式，對于前端工程師來說，使用 typescript 開發無疑就是在嘗試換一種思維方式做事情。其實直到最近，我才開始系統的學習 typescript ，前后大概花了一個月左右的時間。在這之前，我也在...

CKJOKER 2019-08-23 17:05 評論0 收藏0