本文共 2153 字，大约阅读时间需要 7 分钟。

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 (        
   
            
    
You clicked {count} times
            
     setCount(count + 1)}>                Click me                    
   
    );}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 (        
   
    );}export default Example;

componentDidMount、componentDidUpdate、componentWillUnmount 的使用方法

useMemo

import React, { useMemo  } from 'react';export default ({a}) => {    const exampleA = useMemo(() => 
   
    {a}
   
, [a]);  //当a的值 发生变化时候才会渲染    return exampleA}

useRef

import React, { useRef  } from 'react';export default ({a}) => {    const inputEl = useRef(null);    return }

react-router 获取路由参数

import React from 'react';import { withRouter } from 'react-router-dom';export default withRouter((props) => {    return 
   
    {props.match.params.id}
   
})

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 
   
};export default connect(mapStateToProps, mapDispatchToProps)(useAddField);

参考文档

原文

转载地址：http://cyzii.baihongyu.com/