快速入門React

時間 2019-11-08

標籤快速入門 react 欄目 React 简体版

原文原文鏈接

安裝react

npm install creat-react-app -g
html

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

建立新項目

create-react-app my-app
cd my-app
npm start

用腳手架建立一個新的單頁應用，進到項目裏面後start跑起來git

react組件

引入Component組件
JSX語法
渲染虛擬DOM
組件props
組件state
組件嵌套
組件生命週期

組件總覽

首先在頭部引入Component組件，而後經過class方式繼承Component,最後將組件導出，便可成爲單獨組件使用。須要注意的地方就是組件的首字母必定要大寫github

//引入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語句的時候須要用{}包起來。npm

渲染虛擬DOM

關於這一點，要詳細提及來還挺長的。考慮到是快速入門，因而乎咱們就記住一點，當修改值須要react從新渲染的時候，react的機制是不會讓他所有從新渲染的，它只會把你修改值所在的dom從新更新。這也是爲何react性能快的一大緣由。這個選擇渲染dom的算法叫作diff算法，若是要學習react就不能把這個給忘記。在往後須要好好把這方面的知識補全。這裏還要補充的就是，react把JSX語法先轉成react對象，而後經過內部建立節點插入到dom當中。仍是考慮到快速，因此該節篇幅就不繼續展開了，這些知識往後須要好好補全。redux

組件props

props若是接觸過Vue的話，應該會很好理解這個概念。沒接觸過也沒關係，由於是比較容易接受的。咱們這麼理解，其實就是父組件傳給子組件的一些東西，能夠是基本數據類型，也能夠是引用數據類型，也就是說啥均可以傳。子組件能夠經過this.props這個對象來獲取父組件傳下來的值性能優化

仍是看回上面的例子babel

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()這個函數是異步函數。下面仍是看上面的例子react-router

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() {}組件銷燬前執行

下面一張圖解釋生命週期

固然想要暫時略過也不是不可，但往後須要瞭解。

　16.7 生命週期

裝載

constructor
static getDerivedStateFromProps()
render()
componentDidMount()

組件更新

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸載

componentWillUnmount()

錯誤處理

static getDerivedStateFromError()
componentDidCatch()

constructor

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()

能夠用做異步發請求，該生命週期在組件更新時候給多了一次機會操做ｄｏｍ

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

爲了防止重複渲染,若有setstate必須包括在條件中!