建设一个旅游网站,网络营销心得体会,天元建设集团有限公司济南第六建筑工程公司,徐州网站制作费用一、理解什么是Hooks
在React中#xff0c;Hooks其实就是一个函数#xff0c;这个函数的命名以use开头、函数return一个结果#xff1b;React Hooks其实就是封装了一些通用的、公共的方法#xff0c;就是一些通用的工具。
二、React Hooks分为官方Hooks和自定义Hooks
官…一、理解什么是Hooks
在React中Hooks其实就是一个函数这个函数的命名以use开头、函数return一个结果React Hooks其实就是封装了一些通用的、公共的方法就是一些通用的工具。
二、React Hooks分为官方Hooks和自定义Hooks
官方Hooks是指React官方推荐的一些Hooks如useState、useEffect、useContext、useRef、useMemo、useCallback、useReducer、......
1.useState让React函数组件也可以使用状态使用方法const [ age, setAge ] useState(35).
2.useEffect在React函数组件里没有组件生命周期这一说法所以可以使用useEffect来替代组件生命周期使用方法如下
useEffect( () {window.addEventListener(message, handleMessage );return () {window.removeEventListener(message, handleMessage );}
}, [] )
useEffect接收的一个回调函数相当于是componentDidMount和componentDidUpdate回调函数return的这一个回调相当于是componentWillUnmountuseEffect接收的第二个数组是依赖项如果只是模拟组件生命周期可以传空数组通常这个依赖项不要传入过多或过于复杂因为当依赖项发生变化useEffect中的回调函数会重新执行。
3.useContext用于父组件向子组件的跨级传参使用比较简单直接参考官方文档即可。
4.useRef绑定元素ref通常用于调用子组件身上的方法this.formRef.current.doReq()...。
5.useMemo用于缓存函数的计算结果与Vue中的计算属性类似使用方法如下
const result useMemo( () {const res a b;return res;
}, [a,b] )
useMemo的第二个参数为依赖项数组依赖项发生变化则重新计算结果。
6.useCallback缓存函数缓存函数地址通常与React.memo()一起使用React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术具体点说React.memo()其实是通过校验Props中的数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。useCallback通常用于缓存父组件向子组件传递的函数当父组件发生变化时会重新渲染此时若变化与子组件无关子组件不应重复渲染useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。其使用方法如下
import {useCallBack,memo} from react;const Parent ( props ) {const [parentData, setParentData] useState(66); const toChildFun useCallBack( () {console.log(需要传入子组件的函数);}, [])return (divButton onClick{() setParentState(val val1)}点击改变父组件中与Child组件无关的state/ButtonChild fun{toChildFun}/Childdiv)
}const Child memo(( props ) {console.log(子组件渲染了);return div子组件div
} )
7.useReducer相当于写redux直接根据官方文档进行使用。
官方文档里还有一些其他的Hooks其实使用起来都比较方便直接看文档使用就行了在这里就列举以上几种常用的官方Hooks。
自定义Hooks其实就是根据自己的开发需求封装一些通用的、公共的工具函数使用起来其实就和官方推荐的Hooks是一样的。
自定义 Hooks 允许共享有状态逻辑而不是状态本身例如
import { useState } from react;
// 自定义Hooks
function useCounter(initialValue) {const [count, setCount] useState(initialValue);function increment() {setCount(count 1);}return [count, increment];
}// 在其他组件进行使用
import useCounter from ./useCounter;
function Counter() {const [count1, increment1] useCounter(0);const [count2, increment2] useCounter(100);return (divpCount1: {count1}/pbutton onClick{increment1}Increment1/buttonpCount2: {count2}/pbutton onClick{increment2}Increment2/button/div);
}
当我们点击 Increment2 时并不会影响 count1 ,因为每一个 useCounter 的调用都是独立的其内部状态也是独立的。
三、React Hooks使用方法
1.只能在函数外层调用 Hook不要在循环、条件判断或者子函数中调用。
2.只能在 React 的函数组件顶部和自定义 Hook 中调用 Hook。不要在其他 JavaScript 函数中调用。
3.在组件中 React 是通过判断 Hook 调用的顺序来判断某个 state 对应的 useState的所以必须保证 Hook 的调用顺序在多次渲染之间保持一致React 才能正确地将内部 state 和对应的 Hook 进行关联。
四、用Hooks替代一些高阶组件会更有优势
假如现在我们要让多个组件复用一个基于状态的逻辑公共方法
1.使用高阶组件
import { Table } from antd
import server from ./serverfunction useTable(server) {return function (WrappedComponent) {return class HighComponent extends React.Component {state {tableProps: xxx, };render() {const { tableProps } this.state;return WrappedComponent tableProps{tableProps} /;}};};
}useTable(server)
class App extends Component{render(){const { tableProps } this.props;return (Table columns{[...]}{...tableProps}/)}
}
2.使用Hooks
import { Table } from antd
import server from ./apifunction useTable(server) {const [tableProps, setTableProps] useState(xxx);return tableProps;
}function App {const { tableProps } useTable();return (Table columns{[...]}{...tableProps}/)
}
使用Hooks可以减少组件树的层级防止组件深度嵌套同时代码也更少更简洁。
