React Hooks 項目實戰

Hooks簡介

Hooks 是 React v16.7.0-alpha 中加入的新特性。它能夠讓函數組件擁有自己的state。react 16.8.0穩定版本支持Hooks，本文就是演示 Hooks 在項目中的使用示例，對於內部的原理這裏就不做詳細說明。

useState

import React, { useState  } from 'react';
function Example() {
    // 聲明一個名爲“count”的新狀態變量
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default Example;

useEffect

import React, { useEffect  } from 'react';
function Example() {
    //生命週期中的componentDidMount
    useEffect(() => {
        console.log('componentDidMount')  
    },[]);
    //生命週期中的componentDidMount
    useEffect(() => {
        console.log('componentDidMount')
        return ()=>{ //componentWillUnmount
            console.log('componentWillUnmount')
        }
    },[]);
    //生命週期中的componentDidMount 和 componentDidUpdate
    useEffect(() => {
        console.log('類似於 componentDidMount 和 componentDidUpdate:')
    });
    return (
        <div></div>
    );
}

export default Example;

componentDidMount、componentDidUpdate、componentWillUnmount的使用方法

useMemo

import React, { useMemo  } from 'react';
export default ({a}) => {
    const exampleA = useMemo(() => <div>{a}</div>, [a]);  //當a的值 發生變化時候纔會渲染
    return exampleA
}

useRef

import React, { useRef  } from 'react';

export default ({a}) => {
    const inputEl = useRef(null);
    return <input ref={ inputEl } type="text" />
}

react-router 獲取路由參數

import React from 'react';
import { withRouter } from 'react-router-dom';

export default withRouter((props) => {
    return <div>{props.match.params.id}</div>
})

react-redux和redux-saga 的使用

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

const mapStateToProps = (state) => {
  return {
      list:state.list
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      getList:()=>{},//只是實例使用方式
  };
};
const useAddField = (props:Props) => {
  useEffect(()=>{
      console.log('----------第一次渲染')
      this.props.list();
      return ()=>{
        console.log('-------退出')
      }
  },[])   //componentDidMount
  console.log(props.list)  //redux裏面的值
  return <div></div>
};
export default connect(mapStateToProps, mapDispatchToProps)(useAddField);

參考文檔

React 官網

React Hooks FAQ

參考博客