快速入門react

安裝react

npm install creat-react-app -g

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

建立新專案

1. create-react-app my-app
2. cd my-app
3. npm start

用腳手架建立一個新的單頁應用，進到專案裡面後start跑起來

react元件

• 引入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 (
            <div>
                <h1>我是元件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

//首字母大寫！
class Parent extends Component{
    return <MyComponent test="我是props" />
}

export default Parent;

JSX語法

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

render() {      
    return (
        <div>我是元件，{this.props.test}</div>
    )
}

其實用的就是JSX語法，那麼在標籤內可以巢狀js語句。想要巢狀js語句的時候需要用{}包起來。

渲染虛擬DOM

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

元件props

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

還是看回上面的例子

class MyComponent extends Component{
    render() {
        //這裡可以拿到
        return (
            <div>
                <h1>我是元件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}
class Parent extends Component{
    render() {
        //通過父元件傳進去
        return <MyComponent test="我是props" />
    }
}

元件state

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

class MyComponent extends Component{
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        return (
            <div>
                <h1>我是元件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    //點選後可修改state值
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>點我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

元件的巢狀

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

class Parent extends Component{
    render() {
        //使用了MyComponent元件
        return <MyComponent test="我是props" />
    }
}

元件生命週期

在這裡就說一下元件的生命週期函式吧

• componentWillMount() {}元件掛載前

• componentDidMount() {}元件掛載完執行

• componentWillReceiveProps() {}元件更新資料時執行，props、state

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

• componentWillUpdate() {}元件更新前執行

• componentDidUpdate() {}元件更新後執行

• componentWillUnmount() {}元件銷燬前執行

下面一張圖解釋生命週期

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

更深入學習react

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

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

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

後話

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

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

原創文章，轉載需聯絡