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

参考博客