本篇内容主要讲解“如何学习React-Hook”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何学习React-Hook”吧!
成都创新互联公司服务项目包括云阳网站建设、云阳网站制作、云阳网页制作以及云阳网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，云阳网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到云阳省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
数据绑定
在react中state的概念是内部状态的管理，它的变更直接会影响页面的渲染。
在hook中把setState拆开了。每一个单个的state的都会是一个单个的状态，单个状态的变更不会影响其他state。我们可以通过useState实现单个状态的初始化定义。
useState的参数可以是一个数字、字符串、布尔值、数组或对象，也可以是一个函数。
同样我们避免不了会使用集合(对象)来处理一些逻辑。
const [count, setCount] = useState(0); const [count, setCount] = useState(() => 0); const [obj, setObj] = useState({}); setObj((prevObj) => { // 也可以使用 Object.assign return { ...prevObj, age: 23 }; });一般我们会定义一个初始值initialState,如果这个初始值，需要额外的计算开销，我们可以定义一个函数来处理。需要注意的是，useState 函数只会在初始渲染的时候被调用。
const [state, setState] = useState(() => { // 额外的操作someExpensiveComputation const initialState = someExpensiveComputation(props); return initialState; });对于多个state集合的处理，还有另一种方案就是useReducer。
如下多个 state 会随着登录、登出、刷新 token 这三种状态的改变而改变。
const [state, dispatch] = React.useReducer( (prevState, action) => { switch (action.type) { case "RESTORE_TOKEN": return { ...prevState, userToken: action.token, isLoading: false, }; case "SIGN_IN": return { ...prevState, isSignout: false, userToken: action.token, }; case "SIGN_OUT": return { ...prevState, isSignout: true, userToken: null, }; } }, { isLoading: true, isSignout: false, userToken: null, } );副作用
hook 提供了一种新的概念来代替生命周期函数，就是useEffect副作用。它被看作是从 React 的纯函数式世界通往命令式世界的逃生通道。
它的执行时机是在屏幕元素渲染结束后延迟执行。
它的作用有：
// 通过的第二个参数来实现只执行一次或监控state值 useEffect(() => { // ... }, []); // useEffect第一个参数的返回函数就是componentWillUnmount的思想，在组件卸载之前进行 useEffect(() => { const subscription = props.source.subscribe(); return () => { // 清除订阅 subscription.unsubscribe(); }; });但是这种延迟执行的机制不能满足我们所有的场景，如果我们想要实现屏幕绘制和副作用同步执行，比如实时修改dom结构等这样的场景，useEffect无法满足，会出现闪屏的效果。
我们可以通过useLayoutEffect来实现，它的执行时机是在组件加载完成后，屏幕绘制之前进行。但这样也有缺点就是阻塞屏幕渲染，可能会出现白屏或停顿。
所以useLayoutEffect的使用场景：
如果只是单独的获取(get操作)就没有必要使用useLayoutEffect。
组件传值
组件传值的核心：
父传子，通过在子组件设置属性;
子传父，通过回调。
多级组件，通过中间状态管理
// 父组件 function Home() { const [currentTab, setCurrentTab] = useState("msg"); return ( <> // 父传子 // 子传父 setCurrentTab(code)} /> {currentTab} ); } //子组件 function TabView({ currentTab, setCurrentTab }) { return ( {currentTab} { setCurrentTab("pass"); }} /> ); } //子传父 function CodeView({ code, changeCode }) { return ( {code} ); }多组件的传值，可以通过context来处理。
export const MyContent = React.createContext({}); function Home() { return ( ); } function FormItem() { const { phoneValue, setPhoneValue } = useContext(MyContent); return ( {phoneValue} {/* ...*/} ); } function SwitchItemView() { const { codeValue, setCodeValue } = useContext(MyContent); return ( {phoneValue} {/* ...*/} ); }元素节点操作
hook通过useRef来创建节点对象，然后通过ref挂载，通过current来获取。
function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { inputEl.current.focus(); }; return ( <> Focus the input ); }我们可能会封装一些逻辑，自定义一些属性，暴露给父元素，那么我们就会用到useImperativeHandle和forwardRef。
function FancyInput(props, pref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return ; } FancyInput = forwardRef(FancyInput); // 父组件可以直接调用inputRef.current.focus()因为 ref 对象不会把当前 ref 值的变化通知给我们，所以我们必须通过useState和useCallback实现。
function MeasureExample() { const [height, setHeight] = useState(0); const measuredRef = useCallback((node) => { if (node !== null) { setHeight(node.getBoundingClientRect().height); } }, []); return ( <> Hello, world The above header is {Math.round(height)}px tall
); }自定义hook
在代码中，我们会有一些共用的逻辑，我们可以抽离出来比如自定义的防抖节流，自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
const useDebounce = (fn, ms = 30, deps = []) => { let timeout = useRef(); useEffect(() => { if (timeout.current) clearTimeout(timeout.current); timeout.current = setTimeout(() => { fn(); }, ms); }, deps); const cancel = () => { clearTimeout(timeout.current); timeout = null; }; return [cancel]; }; export default useDebounce; const Home = (props) => { const [a, setA] = useState(0); const [b, setB] = useState(0); const [cancel] = useDebounce( () => { setB(a); }, 2000, [a] ); const changeIpt = (e) => { setA(e.target.value); }; return ( {b} {a}
); };性能优化
单向数据流，各组件层次分明，状态明确，但是当项目体量大，组件嵌套多的时候，性能损耗也非常大，所以我们会做一些性能优化的工作。
可能的优化场景有：
其实useMemo和useCallback的核心思想相同，都是记录上一次的输入，如果下一次输入与上一次相同，将不会计算，直接获取上一次的结果。他们的区别只是形式上的，useMemo返回一个 memoized 值。而useCallback返回的是memoized回调函数。
useMemo缓存计算结果的值。
useCallback主要用于缓存函数。
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); // useMemo const [count, setCount] = useState(1); const [val, setValue] = useState(""); const expensive = useMemo(() => { let sum = 0; for (let i = 0; i < count * 100; i++) { sum += i; } return sum; }, [count]); return ( {count}-{expensive}
{val}
setCount(count + 1)}>+c1 setValue(event.target.value)} />
);捎带了解一下memoized，简单讲就是把函数的计算结果缓存起来，比如递归。
const memoize = function(fn) { const cache = {}; return function() { const key = JSON.stringify(arguments); var value = cache[key]; if(!value) { console.log('新值，执行中...'); // 为了了解过程加入的log，正式场合应该去掉 value = [fn.apply(this, arguments)]; // 放在一个数组中，方便应对undefined，null等异常情况 cache[key] = value; } else { console.log('来自缓存'); // 为了了解过程加入的log，正式场合应该去掉 } return value[0]; } } module.exports = memoize; const memoize = require('./memoize.js'); const log = console.log; // 斐波那契数组 const fibonacci = (n) => { return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); }; const memoizeFibonacci = memoize(fibonacci); log(memoizeFibonacci(45)); // 新值，执行中...; 1134903170 // 等待时间比较长 log(memoizeFibonacci(45)); // 来自缓存; 1134903170 log(memoizeFibonacci(45)); // 来自缓存; 1134903170 log(memoizeFibonacci(45)); // 来自缓存; 1134903170到此，相信大家对“如何学习React-Hook”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
本文名称：如何学习React-Hook
当前URL：
http://www.cdkjz.cn/article/gpdjph.html
