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

npm install creat-react-app -g

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

create-react-app my-app

cd my-app

npm start

用腳手架創建一個新的單頁應用，進到項目里面后start跑起來

引入Component組件

JSX語法

渲染虛擬DOM

組件props

組件state

組件嵌套

組件生命周期

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

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

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

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

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

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

export default Parent;

確實說白了就是html標簽寫到js中去，然后通過babel轉譯成react虛擬DOM對象，然后再渲染。
上例中

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

其實用的就是JSX語法，那么在標簽內可以嵌套js語句。想要嵌套js語句的時候需要用{}包起來。

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

props如果接觸過Vue的話，應該會很好理解這個概念。沒接觸過也不要緊，因為是比較容易接受的。我們這么理解，其實就是父組件傳給子組件的一些東西，可以是基本數據類型，也可以是引用數據類型，也就是說啥都可以傳。子組件可以通過this.props這個對象來獲取父組件傳下來的值

還是看回上面的例子

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

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

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

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

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

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

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

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

componentWillMount() {}組件掛載前

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

componentWillReceiveProps() {}組件更新數據時執行，props、state

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

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

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

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

下面一張圖解釋生命周期

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

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 };
}

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

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

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

實際上作為性能優化的一種方案,但是不能依賴于它來阻止渲染,因為這樣會引起bug

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

注意，返回false不能阻止子組件當他們的狀態改變時重新渲染。

組件實例化后和接受新屬性時將會調用getDerivedStateFromProps。它應該返回一個對象來更新狀態，或者返回null來表明新屬性不需要更新任何狀態。

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

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

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

附上一張學習路線圖，供大家學習參考

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

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

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

原創文章，轉載需聯系