React|React Hooks 入门记录
什么是 Hooks
以往，React 组件都是通过 class 的形式来编写，只有无状态组件才可以用函数来编写。Hooks 就允许我们在函数组件中使用预定义函数，来标记状态和组件生命周期，这使得所有组件都可以使用函数来编写。类组件的劣势
-
- 状态逻辑难复用
缺少复用机制
渲染属性和高阶组件导致层级冗余
- 状态逻辑难复用
-
- 趋向复杂难以维护
生命周期函数混杂不相干逻辑
想干逻辑分散在不同生命周期
- 趋向复杂难以维护
-
- this指向困扰
内联函数过度创建新句柄
类成员函数不能保证this
- this指向困扰
- 函数组件无 this 问题
- 自定义 Hook 方便复用状态逻辑
- 副作用的关注点分离
- 仅在顶层调用 Hooks 函数
整个 Hooks 函数都依赖调用顺序，这样 React 才能在不同的渲染周期中把相同的逻辑关联起来，一旦 Hooks 函数不在顶层调用，那么很有可能在组件的不同渲染周期中，他们的调用顺序发生了变化，进而导致变量混乱等错误，为了尽量规避这些问题，所以尽量把 Hooks 放在最顶层。
- 仅在函数组件及 函数组件 中调用 Hooks 函数，不能放在普通函数及类组件中
Hooks 函数必须是use开头Hooks 常见问题 生命周期函数如何映射到 Hooks ？
getDerivedStateFromError() 这个处理错误的函数，暂时无法在 Hooks 中实现，由此看出 Hooks 暂时无法代替类组件
function App () {
useEffect(() => {
// componentDidMount
return () => {
// componentWillUnmount
}
}, [])
let renderCouter = useRef(0) // 通过 ref 来保持渲染计数
renderCouter.current++useEffect(() => {
if (renderCouter > 1) {
// componentDidUpdate
}
})
}
类实例成员变量如何映射到 Hooks ?
使用 useRef(0)，同步到 current 中Hooks 中如何获取历史 props 和 state
使用 useRef(0)，同步到 current 中如何强制更新一个 Hooks 组件
创建一个不参与渲染的 state 的值，通过修改这个 state 的值来实现强制渲染
function Counter () {
const [updater, setUpdater] = useState(0)
function forceUpdate () {
setUpdater(updater => updater + 1)
}
}
使用 eslint-plugin-react-hooks 防止代码出错 1.安装
npm install eslint-plugin-react-hooks -D
2.在package.json 中配置
// package.json
...
"eslintConfig": {
"extends": "react-app",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
}
},
...
简单使用 useState 使用传统类组件
import React, { Component } from 'react'
class ClassComponent extends Component {
state = {
count: 0
}
render () {
const { count } = this.state
return (
)
}
}
使用 Hooks
import React, { Component, useState } from 'react'
function HooksComponent () {
// useState 传入 count 的默认值
// count 获取值
// setCount 设置值
const [count, setCount] = useState(0)
return (
)
}
通过 props 设置默认值
import React, { Component, useState } from 'react'
function HooksComponetDefault (props) {
// 使用 props 设置默认值，useState 传入的函数只会被调用一次
const [count, setCount] = useState(() => {
return props.defaultCount || 0
})
return (
)
}
使用 Effect Hooks 常见副作用：
- 绑定事件
- 网络请求
- 访问DoM
- Mount之后（componentDidMount）
- Update之后（componentDidUpdate）
- Unmount之前（componentWillUnmount）
useEffect()关于 useEffect()
userEffect()标准上是在组件渲染(render)之后调用，并且根据自定义状态来决定是否调用，函数组件第一次渲染后的调用，就相当于componentDidMount()，后面的调用都相当于componentDidUpdate()。
useEffect() 的参数userEffect()可以返回一个回调函数，这个回调函数的执行时机跟userEffect()执行时机挂钩。这个回调函数的主要作用是 清除上一次副作用所遗留下来的状态
【第一个参数】第一个参数为一个函数，返回值为回调函数。回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载
【第二个参数】如果不填，则每次渲染后都会执行。第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行，因此，传一个空数组的话，该 useEffect 就只会在第一次调用一次简单使用
function HooksCompinentUseEffect () {
const [ count, setCount ] = useState(0)
const [ size, setSize ] = useState({
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
})
const onWindowResize = () => {
setSize({
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
})
}// useEffect 第一个参数为一个函数
// 这里类似 componentDidount 和 componentDidUpdate
useEffect(() => {
document.title = count
})// useEffect 第一个参数为一个函数，第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行
// 这里类似 componentDidMount 和 componentWillUnmount
useEffect(() => {
window.addEventListener('resize', onWindowResize, false)
// 回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载
return () => {
window.removeEventListener('resize', onWindowResize, false)
}
},[])
return (
W: {size.width} | H: {size.height})
}
Hooks环境下的Context
不要滥用 context，因为会破坏组件的独立性
import React, { useState, createContext, useContext } from 'react'
// 使用 context
const CountContext = createContext()
function HooksContextProvider () {
const [ count, setCount ] = useState(0)
return (
{/* value 中设置的是需要共享的值 */}
使用 useMemo 和 memo
useMemo 和 memo 的区别，memo针对的是一个组件的渲染是否重复执行，useMemo定义了一段函数是否重复执行。本质都是利用同样的算法，来判断依赖是否发生改变，进而决定是否触发特定逻辑，同样都用来做性能优化。useMemo的参数
第一个参数为要执行的逻辑函数
第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次与 useEffect 的差异
两个函数的调用时机不同，useEffect() 执行的是副作用，所以一定是在渲染完成之后运行，而useMemo() 是需要有返回值，返回值直接参与渲染，因为 useMemo() 是在渲染期间完成的。两者存在一前一后的区别useMemo 简单使用
import React, { useState, useMemo } from 'react'
// 使用 memo
function HookMemoParent () {
const [ count, setCount ] = useState(0)
// 第一个参数为要执行的逻辑函数
// 第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次
// 当第二个参数发生变化时，就会触发逻辑，跟数组是什么值无关
const doubleCount = useMemo(() => {
return count * 2
}, [count])// 根据第二个参数，count < 3 时，保持不变，不会重新计算
// 当数组中的 bool 值发生改变时，就会重新渲染，false => true => false，所以 boolCount 会重新渲染两次
const boolCount = useMemo(() => {
return count * 3
}, [count === 3])return ()
}
function HooksMemoChild (props) {
return (
{props.count}
)
}
useMemo 和 useCallback
当需要用 useMemo 返回一个函数时，可以使用 useCallback 代替，可以替代上一层函数。使用 useCallback 不能解决阻止创建新的函数，因为每次组件的函数执行都会创建新的函数，但是创建的这个函数不一定能够被返回，很可能会被直接弃用。useCallback解决的是传入子组件的函数参数过渡变化，导致子组件过渡渲染的问题。实际上 useCallback 只是 useMemo 的一种简写。
【特别提醒】使用 useMemo 和 useCallback 时，当依赖变化时，useMemo 和 useCallback 一定重新执行。但是，当依赖没变化时，不能保证它们一定不执行，也可能重新执行，这是考虑内存优化的结果，react 官方的文档中也没有打包票一定不执行。所以，useMemo 和 useCallback 可以作为一种锦上添花的方案，不可以过渡依赖它们是否重新执行。useCallback的参数
第一个参数为要执行的逻辑函数
第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次
useMemo(() => {
return () => { console.log("click") }
}, [])
// 上下两者等价
useCallback(() => {
console.log("click")
}, [])
使用 useRef
useRef 和 useState 区别
- 获取子组件或者DOM节点的句柄
- 获取跨越渲染周期的任意数据
state 的赋值会触发组件重渲染，但是 ref 不会【特别用法】
【React|React Hooks 入门记录】如果在组件中，需要使用上次渲染的数据，可以使用useRef，同步到 current 中
// useRef
function HooksUseRef () {
const [ count, setCount ] = useState(0)
// 声明ref
const countRef = useRef()
// 将定时器实例，通步在useRef中，这样就可以防止每次渲染时重复调用
const timer = useRef()// 给子组件传递的事件
const bindChildClick = useCallback(() => {
console.log('click')
// 通过 current 获取 DOM 节点
console.log(countRef.current)
// 通过 ref 调用子组件的方法
countRef.current.speak()
}, [countRef])// 使 count 自增
useEffect(() => {
timer.current = setInterval(() => {
setCount(count => count + 1)
}, 1000)
return () => {
cleanup
}
}, [])
// 监测 count 大于10，停止自增
useEffect(() => {
if (count >= 10) {
clearInterval(timer.current)
}
})return (
{/* 给类组件的ref属性赋值 */})
}
// 类组件获取 ref
class HooksUseRefClassChild extends PureComponent {
speak () {
console.log('this is child function: ', this.props.count)
}
render () {
const { props } = this
return HooksUseRefClassChild: {props.count}
}
}
自定义 Hooks 函数
// 自定义 hooks 函数，一定要使用 use 开头
function useCount (defaultCount) {
const [count, setCount] = useState(defaultCount)
const timer = useRef()
// 使 count 自增
useEffect(() => {
timer.current = setInterval(() => {
setCount(count => count + 1)
}, 1000)
return () => {
cleanup
}
}, [])
// 监测 count 大于10，停止自增
useEffect(() => {
if (count >= 10) {
clearInterval(timer.current)
}
})
// 这里的返回值可以自定义，我参考 useState 的返回
return [count, setCount]
}
// 自定义 hooks 函数，返回 JSX
function useCountJSX (defaultCount) {
return (
{defaultCount}
)
}
function HooksSelfFunciton () {
const [count, setCount] = useCount(0) // 模仿原生的 useState
const CountJSX = useCountJSX(count) // 直接返回 JSX
return (
useCountJSX: {CountJSX})
}
推荐阅读
- react|react 安装
- typeScript入门基础介绍
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- Android|Android sqlite3数据库入门系列
- Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- 深度学习-入门
- 第三章|第三章 进校园重拾旧梦 登讲台初为人师第一节 接乱班面临考验 ，遇高师指点入门