React入門基礎知識總結

時間 2019-12-10

標籤 react 入門基礎知識總結欄目 React 简体版

原文原文鏈接

1.React組件

function組件，

function Button() {
  return ()
}

class組件，來自ES6的class語法，

class Button extends React.Component{
  constructor(){
    super()
  }
  render(){
    return()
  }
}

2. 父子組件通訊

父組件經過props給子組件傳遞數據，
子組件則是經過調用父組件傳遞給它的函數向父組件傳遞數據，調用時注意bind(this)

3. Redux（主要用於父子組件之間的通訊）

3.1 VanillaJS

根據state和action建立一個reducer
由reducer建立一個存放狀態的store
須要更改數據時，經過store.dispatch一個action來進行更改。例如store.dispatch({type: add},payload: 1)
store.subscribe(render)監聽store中state的變化，而後從新render

核心代碼css

<body>
  <div>
    你點擊了 <span id="value">0</span> 次
    <div>
      <button onclick="add1()">+1</button>
      <button onclick="minus()">-1</button>
      <button onclick="addIfOdd()">若是是單數就+1</button>
      <button onclick="addAsync()">1秒鐘後+1</button>
    </div>
  </div>
  <script>
    function add1(){
      store.dispatch({type: 'increase'})
    }
    function minus(){
      store.dispatch({type: 'decrease'})
    }
    function addIfOdd(){
      if (store.getState() %2 === 1){
        store.dispatch({type: 'increase'})
      }
    }
    function addAsync(){
      setTimeout(()=>{
        store.dispatch({type:'increase'})
      },1000)
    }
    function reducer(state,action){
      if (state === undefined){
        return 0
      }
      switch(action.type){
        case 'increase' : 
          return state + 1;
        case 'decrease':
          return state - 1;
        default:
          return state;
      }
    }
    store = Redux.createStore(reducer)
    const render = function(){
        document.querySelector('#value').innerHTML = store.getState()
    }
    render()
    store.subscribe(render)
  </script>
</body>

</html>

3.2 React+Redux

代碼結構和原生js的redux1-2-3-4差很少
增長了react父子組件之間的通訊

3.3 React-redux

父組件中建立store,用<Provider store={store}></Provider>包裹子組件

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root')
);

mapStateToProps,mapDispatchToProps兩個函數將Provider傳入的store接收，導出子組件時用connect函數，使得子組件的props接收state和dispatch。
不須要subscribe(render)了

import React, { Component } from 'react';
import { connect } from "react-redux";


class App extends Component {
  add1IfOdd(){
    if(this.props.n %2 === 1){
      this.props.add1()
    }
  }
  render() {
    return (
      <div>
        你點擊了 <span id="value">{this.props.n}</span> 次
        <div>
          <button id="add1" onClick={()=> this.props.add1()}>+1</button>
          <button id="add2" onClick={()=> this.props.add2()}>+2</button>
          <button id="add1IfOdd"  onClick={()=>{this.add1IfOdd()}}>若是是單數就+1</button>
          <button id="add1After2Sec">兩秒鐘後+1</button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state){
  return {
    n: state.n
  }
}
function mapDispatchToProps(dispatch) {
  return {
    add1: ()=> dispatch({type:'add', payload: 1}),
    add2: ()=> dispatch({type: 'add',payload: 2})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

4. Context API 的使用

主要應用於不一樣層級的組件須要訪問一樣的數據，使用context能夠避免經過中間元素傳遞props。html

// Context 可讓咱們無須明確地傳遍每個組件，就能將值深刻傳遞進組件樹。
// 爲當前的 theme 建立一個 context（「light」爲默認值）。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一個 Provider 來將當前的 theme 傳遞給如下的組件樹。
    // 不管多深，任何組件都能讀取這個值。
    // 在這個例子中，咱們將 「dark」 做爲當前的值傳遞下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中間的組件不再必指明往下傳遞 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，而後使用它的值。
  // 在這個例子中，當前的 theme 值爲 「dark」。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

5. Hooks API 的使用

Hook 是 React 16.8 的新增特性。它可讓你在不使用 class 組件的狀況下使用 state 以及其餘的 React 特性。react

useState
useEffect

當你調用 useEffect 時，就是在告訴 React 在完成對 DOM 的更改後運行你的「反作用」函數。因爲反作用函數是在組件內聲明的，因此它們能夠訪問到組件的 props 和 state。默認狀況下，React 會在每次渲染後調用反作用函數 —— 包括第一次渲染的時候。git

6. React Router

核心代碼github

ReactDOM.render(
  <Router>
    <div>
      <div>
        <Link to="/">
          <button>首頁</button>
        </Link>{" "}
        |<Link to="/login">登陸</Link> |<Link to="/signup">註冊</Link> |
        <Link to="/welcome">歡迎</Link>
      </div>
      <Route path="/" exact component={App} />
      <Route path="/login" component={Box2} />
      <Route path="/signup" component={Box1} />
      <Route path="/welcome" component={Welcome} />
    </div>
  </Router>,
  rootElement
);