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

参考博客