摘要：考慮到是快速入門，于是乎我們就記住一點(diǎn)，當(dāng)修改值需要重新渲染的時候，的機(jī)制是不會讓他全部重新渲染的，它只會把你修改值所在的重新更新。這一生命周期返回的任何值將會作為參數(shù)被傳遞給。

npm install creat-react-app -g

這里直接安裝react的一個腳手架，里面包含了要用到的許多東西，幫助快速入門react

create-react-app my-app

cd my-app

npm start

用腳手架創(chuàng)建一個新的單頁應(yīng)用，進(jìn)到項(xiàng)目里面后start跑起來

引入Component組件

JSX語法

渲染虛擬DOM

組件props

組件state

組件嵌套

組件生命周期

首先在頭部引入Component組件，然后通過class方式繼承Component,最后將組件導(dǎo)出，即可成為多帶帶組件使用。需要注意的地方就是組件的首字母一定要大寫

//引入Component
import {Component} from "react";

//首字母大寫！
class MyComponent extends Component{
    
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    /*react生命周期函數(shù)*/
    componentWillMount() {}

    componentDidMount() {}
    
    componentWillReceiveProps() {}
    
    shouldComponentUpdate() {}
    
    componentWillUpdate() {}
    
    componentDidUpdate() {}
    
    componentWillUnmount() {}
    //通過render函數(shù)可以將JSX語法渲染成真實(shí)dom
    render() {      
        return (
            

                
我是組件
                
{this.props.test}
                {
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點(diǎn)我
                
{this.state.isShow}
            
        )
    }
}

//首字母大寫！
class Parent extends Component{
    return 
}

export default Parent;

確實(shí)說白了就是html標(biāo)簽寫到j(luò)s中去，然后通過babel轉(zhuǎn)譯成react虛擬DOM對象，然后再渲染。
上例中

render() {      
    return (
        
我是組件，{this.props.test}
    )
}

其實(shí)用的就是JSX語法，那么在標(biāo)簽內(nèi)可以嵌套js語句。想要嵌套js語句的時候需要用{}包起來。

關(guān)于這一點(diǎn)，要詳細(xì)說起來還挺長的?？紤]到是快速入門，于是乎我們就記住一點(diǎn)，當(dāng)修改值需要react重新渲染的時候，react的機(jī)制是不會讓他全部重新渲染的，它只會把你修改值所在的dom重新更新。這也是為什么react性能快的一大原因。這個選擇渲染dom的算法叫做diff算法，如果要學(xué)習(xí)react就不能把這個給忘記。在日后需要好好把這方面的知識補(bǔ)全。這里還要補(bǔ)充的就是，react把JSX語法先轉(zhuǎn)成react對象，然后通過內(nèi)部創(chuàng)建節(jié)點(diǎn)插入到dom當(dāng)中。還是考慮到快速，所以該節(jié)篇幅就不繼續(xù)展開了，這些知識日后需要好好補(bǔ)全。

props如果接觸過Vue的話，應(yīng)該會很好理解這個概念。沒接觸過也不要緊，因?yàn)槭潜容^容易接受的。我們這么理解，其實(shí)就是父組件傳給子組件的一些東西，可以是基本數(shù)據(jù)類型，也可以是引用數(shù)據(jù)類型，也就是說啥都可以傳。子組件可以通過this.props這個對象來獲取父組件傳下來的值

還是看回上面的例子

class MyComponent extends Component{
    render() {
        //這里可以拿到
        return (
            

                
我是組件
                
{this.props.test}
                {
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點(diǎn)我
                
{this.state.isShow}
            
        )
    }
}
class Parent extends Component{
    render() {
        //通過父組件傳進(jìn)去
        return 
    }
}

組件state是狀態(tài)，這里存放的就是該組件的一些會改變的變量，就是狀態(tài)。比如判斷組件屬性變化，獲取表單值等。修改state會引起react重新渲染，也就是更新狀態(tài)會引起組件刷新。我們可以通過setState()這個函數(shù)來設(shè)置state的值。不過要注意的是setState()這個函數(shù)是異步函數(shù)。下面還是看上面的例子

class MyComponent extends Component{
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        return (
            

                
我是組件
                
{this.props.test}
                {
                    //點(diǎn)擊后可修改state值
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點(diǎn)我
                
{this.state.isShow}
            
        )
    }
}

這個意思實(shí)際上就是在一個組件里面可以用別的組件的意思。因此你可以把組件劃分得比較細(xì)致，以便更多的復(fù)用。

class Parent extends Component{
    render() {
        //使用了MyComponent組件
        return 
    }
}

在這里就說一下組件的生命周期函數(shù)吧

componentWillMount() {}組件掛載前

componentDidMount() {}組件掛載完執(zhí)行

componentWillReceiveProps() {}組件更新數(shù)據(jù)時執(zhí)行，props、state

shouldComponentUpdate() {}組件需要更新時執(zhí)行

componentWillUpdate() {}組件更新前執(zhí)行

componentDidUpdate() {}組件更新后執(zhí)行

componentWillUnmount() {}組件銷毀前執(zhí)行

下面一張圖解釋生命周期

當(dāng)然想要暫時略過也不是不可，但日后需要了解。

constructor

static getDerivedStateFromProps()

render()

componentDidMount()

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

componentWillUnmount()

static getDerivedStateFromError()

componentDidCatch()

constructor可以初始化state

constructor(props) {
  super(props);
  this.state = { color: "#333" };
}

不要直接把props附給state!此模式僅用于你希望故意忽略屬性更新 。

constructor(props) {
  super(props);
  // Don"t do this!
  this.state = { color: props.color };
}

可以用作異步發(fā)請求，該生命周期在組件更新時候給多了一次機(jī)會操作ｄｏｍ

componentDidUpdate(prevProps) {
  // Typical usage (don"t forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

為了防止重復(fù)渲染,如有setstate必須包括在條件中!

實(shí)際上作為性能優(yōu)化的一種方案,但是不能依賴于它來阻止渲染,因?yàn)檫@樣會引起bug

不推薦做深相等檢測，或使用JSON.stringify()在shouldComponentUpdate()中。這是非常無效率的會傷害性能。

注意，返回false不能阻止子組件當(dāng)他們的狀態(tài)改變時重新渲染。

組件實(shí)例化后和接受新屬性時將會調(diào)用getDerivedStateFromProps。它應(yīng)該返回一個對象來更新狀態(tài)，或者返回null來表明新屬性不需要更新任何狀態(tài)。

getSnapshotBeforeUpdate()在最新的渲染輸出提交給DOM前將會立即調(diào)用。

它讓你的組件能在當(dāng)前的值可能要改變前獲得它們。這一生命周期返回的任何值將會 作為參數(shù)被傳遞給componentDidUpdate()。

學(xué)完react，我們還需要知道react-router、redux等react全家桶。還在這推薦一個開源框架DVa.js。當(dāng)然，這是融合的比較好的，如果學(xué)有余力不妨去了解了解

附上一張學(xué)習(xí)路線圖，供大家學(xué)習(xí)參考

圖片來源：https://github.com/adam-golab/react-developer-roadmap

入門react并不難，但是要用得精通卻不容易。本文并不指望能讓你懂多少react，但是如果能帶你入門，那便是他它的成功。希望每個人都能成為自己想要的樣子。

最后，成功不在一朝一夕，我們都需要努力

原創(chuàng)文章，轉(zhuǎn)載需聯(lián)系