React總結

Leon Aries發表於2018-09-29

React

一、利用腳手架搭建React專案首先確保自己電腦上安裝了Npm 以及Node（6.5以上版本）

1.npm install create-react-app -g

2. create-react-app my_react

3. cd my_react

4. npm start

二、路由

在src目錄下新建 router.js

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import DefaultLayout from './layouts/DefaultLayout/DefaultLayout';
import LoginUser from './layouts/LoginUser/LoginUser';
export default class RouterWrap extends Component{
    render(){
        return (
            <div id="router">
                <HashRouter>
                    <Switch>
                        <Route path="/" component={LoginUser}  exact />
                        <Route path="/home" component={DefaultLayout}/>
                    </Switch>
                </HashRouter>
            </div>
        )
    }
}複製程式碼

修改app.js 引入router

import React, { Component } from 'react';
import RouterWrap from  './router'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <RouterWrap/>
      </div>
    );
  }
}

export default App;                                                                
複製程式碼

需要了解BrowserRouter、Route、Link、 Switch、 exact精準匹配、 component={ NoMatch }404頁面以及巢狀路由(this.props.children)、動態路由（this.props.match.params.value）的用法

三、元件生命週期

React 元件生命週期主要分為三個階段

Mounting 插入真實 Dom

Updating 正在被重新渲染

Unmounting 已移除真實Dom

常用的生命週期函式

componentwillMount

componentDidMount

componentWillUpdate

conponentDidUpdate

componentWillUnmounting

詳細的生命週期執行的函式

render mounting 和 updating時

shouldComponentUpdate（nextProps , nextState）{ return true 或者 false } 判斷子元件接收的props值是否發生了改變，元件是否需要被更新

componentWillReceiveProps props更新時執行的生命週期函式一個元件要從父元件接收引數，如果這個元件第一次存在於父元件中，不會執行，如果這個元件已經存在於父元件中，才會執行

四、props 和 state

元件的state 只能通過 this.setState()去修改 setState 是一個非同步函式第二個引數可以接收一個回撥函式作為 this.setState執行過後執行的函式

子元件通過 props 接收父元件傳下來的值 propTypes 驗證 props defaultProps 預設props值

觸發事件比如點選事件

需要通過 this.func.bind(this)手動繫結this ,可以在第二個位置傳遞引數個

當元件的props 和 state改變時元件的render函式會重新執行當父元件的render函式重新執行時，所有子元件的render函式都會重新執行

五、react 中的虛擬dom

1. state 資料
2. JSX 模版

3. 資料 + 模版 生成虛擬DOM（虛擬DOM就是一個JS物件，用它來描述真實DOM）（損耗了效能）
['div', {id: 'abc'}, ['span', {}, 'hello world']]

4. 用虛擬DOM的結構生成真實的DOM，來顯示 
<div id='abc'><span>hello world</span></div>

5. state 發生變化

6. 資料 + 模版 生成新的虛擬DOM （極大的提升了效能）
['div', {id: 'abc'}, ['span', {}, 'bye bye']]

7. 比較原始虛擬DOM和新的虛擬DOM的區別，找到區別是span中內容（極大的提升效能）

8. 直接操作DOM，改變span中的內容

優點：
1. 效能提升了。
2. 它使得跨端應用得以實現。React Native
複製程式碼

六、react中的 ref

可以通過 ref獲取dom節點直接操作dom

ref= { (input) => {this.input = input} }

七、提升react效能的方法

（1）虛擬dom key值同層比對

（2）setState 底層的非同步函式多個合併成一個

（3）在 constructor 中函式的作用域繫結 bind(this)

（4）shouldComponentUpdate 避免子元件重複渲染

八、redux