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
参考博客
原文https://www.tuicool.com/articles/v2euyuy
