Hooks 常见的问题

预防Hooks的小错误

安装 eslint-plugin-react-hooks

npm i eslint-plugin-react-hooks -D

并且在package.json中配置规则

"eslintConfig": {"extends": ["react-app","react-app/jest"],"plugins": ["react-hooks"],"rules": {"react-hooks/rules-of-hooks":"error"}}

Hooks的原理

单向链表通过next把hooks串联起来
memoizedState存在fiber node上，组件之间不会相互影响
useState和useReducer中通过dispatchAction调度更新任务

Hooks的使用注意事项

只能在顶层调用Hooks? Hooks是使用数组或单链表串联起来，Hooks顺序修改会打乱执行结果
useState在多个组件中引入，彼此之间会不会有影响? 在React中Hooks把数据存在fiber node上的，每个组件都有自己的currentlyRenderingFiber.memoizedState

Hooks的问题

只能在顶层调用Hooks? Hooks是使用数组或单链表串联起来，Hooks顺序修改会打乱执行结果
useState在多个组件中引入，彼此之间会不会有影响? 在React中Hooks把数据存在fiber node上的，每个组件都有自己的currentlyRenderingFiber.memoizedState

对传统React的影响

生命周期函数如何映射到Hooks?

import {useEffect, useState,useRef} from 'react'class Counter extends Component{state = {overflow:0}static getDerivedStateFromProps(props, state) {if (props.count > 10) {return {overflow:true}}}
}function Counter(props) {const [overflow, setOverflow] = useState(false)if (props.count > 10) {setOverflow(true)}
}
export default App;

import {useEffect, useState,useRef} from 'react'function App() {const [count, setCount] = useState(0);const it = useRef();useEffect(() => {// componentDidMountit.current=setInterval(() => {setCount(count=>count +1)},1000)return () => {// componentWillUnmountconsole.log("组件即将被删除")}}, [])useEffect(() => {if (count >= 10) {// componentDidUpdateclearInterval(it.current)}})return (<div>count:{count}</div>)
}
export default App;

函数组件还没办法完全取代类组件，componentDidCatch和 componentDidCatch和getSnapshotBeforeUpdate函数还不能被代替

React16新的生命周期弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate
新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）
React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceivePorps，componentWillUpdate
新增了对错误的处理（componentDidCatch）

类实例成员变量如何映射到Hooks ?

class App{it = 0
}
function App() {const it =useRef(0)
}

Hooks中如何获取历史props和state ?

import React,{useEffect, useState,useRef} from 'react'function Counter(props) {const [count, setCount] = useState(() => {return props.defaultCount || 0});const prevCountRef = useRef();const prevCount =prevCountRef.current >= 0?prevCountRef.current :"count未发生变化"let it =useRef()useEffect(() => {prevCountRef.current = count}, [count]);useEffect(() => {it.current=setInterval(() => {setCount(count=>count +1)},100)},[])useEffect(() => {if (count >= 10) {clearInterval(it.current)}})return <button onClick={() => {setCount(count+1)}}>Now:{count},before:{prevCount}</button>
}export default Counter;

定义一个ref来保存上一次的count值
副作用同步count到ref中，页面ref不受重新渲染的影响
可以在下一次渲染周期中取出上一次渲染内容

如何强制更新一个Hooks组件?

import {useEffect, useState,useRef} from 'react'function App() {const [count, setCount] = useState(0)const [updater,setUpdate]=useState(0)function forceUpdater() {setUpdate(updater => updater + 1)}const prevCountRef = useRef();useEffect(() => {prevCountRef.current = count;})const prevCount = prevCountRef.currentreturn <h1>Now:{count},before:{prevCount}</h1>
}
export default App;

创建一个不参与实际渲染的state
更新值，以此来出发强制渲染

今日金句

人若软弱，就是最大的敌人；人若坚强，就是最好的朋友。坚强的个性，才是你怯懦时的打气筒，摔倒时的拐杖，冲锋时的号角。人生最大的悲剧，并不是败给了对手，而是败给了自己。

Hooks 常见的问题相关推荐

React之常见的hooks
前面是类组件,今天是函数式组件函数式组件的特点没有状态没有生命周期没有this useState src>index.js import React from 'react' impor ...
git原理及常见使用方法
Git 原理入门-来自阮一峰 Git 是最流行的版本管理工具,也是程序员的必备技能之一. 即使天天使用它,很多人也未必了解它的原理.Git 为什么可以管理版本?git add.git commit这些 ...
Java 最常见的 10000+ 面试题及答案整理：持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
React学习笔记5：React Hooks概述
文章目录概述 React的两套API 类和函数的差异副效应(副作用)是什么? 钩子(hook)出现的意义三大框架对比为什么学习hooks 应用场景新版本特性解读 Hook使用规则概述 Re ...
探React Hooks
前言众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...
spring.profiles.active配置了没生效_一文带你彻底学会 Git Hooks 配置
你好,我是小桔,是一个没有感情的代码崽. 今天给大家介绍一下 Git Hooks,相信 Git 大家都在用吧,Git 除了用作版本控制,还有许多高级功能,Git Hooks 就是其中之一. 本文环境: ...
【译】什么是React Hooks
原文:What are React Hooks? 作者:Robin Wieruch 译者:博轩 React Hooks 于 2018年10月的React Conf 中引入,作为在 React 函数组件 ...
理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
（十三）react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题用useState实现state和setState功能用useEffect模拟组件生命 ...

Hooks 常见的问题

预防Hooks的小错误

Hooks的原理

Hooks的使用注意事项

Hooks的问题

对传统React的影响

生命周期函数如何映射到Hooks?

类实例成员变量如何映射到Hooks ?

Hooks中如何获取历史props和state ?

如何强制更新一个Hooks组件?

今日金句

Hooks 常见的问题相关推荐

最新文章

热门文章