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

npm install creat-react-app -g

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

create-react-app my-app

cd my-app

npm start

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

引入Component組件

JSX語(yǔ)法

渲染虛擬DOM

組件props

組件state

組件嵌套

組件生命周期

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

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

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

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

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

//首字母大寫(xiě)！
class Parent extends Component{
    return 
}

export default Parent;

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

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

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

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

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

還是看回上面的例子

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() {
        //通過(guò)父組件傳進(jìn)去
        return 
    }
}

組件state是狀態(tài)，這里存放的就是該組件的一些會(huì)改變的變量，就是狀態(tài)。比如判斷組件屬性變化，獲取表單值等。修改state會(huì)引起react重新渲染，也就是更新?tīng)顟B(tài)會(huì)引起組件刷新。我們可以通過(guò)setState()這個(gè)函數(shù)來(lái)設(shè)置state的值。不過(guò)要注意的是setState()這個(gè)函數(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}
            
        )
    }
}

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

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

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

componentWillMount() {}組件掛載前

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

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

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

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

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

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

下面一張圖解釋生命周期

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

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ā)請(qǐng)求，該生命周期在組件更新時(shí)候給多了一次機(jī)會(huì)操作ｄｏｍ

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)化的一種方案,但是不能依賴于它來(lái)阻止渲染,因?yàn)檫@樣會(huì)引起bug

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

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

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

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

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

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

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

圖片來(lái)源：https://github.com/adam-golab/react-developer-roadmap

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

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

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