学习React-Hook,我们应该思考哪些东西

开发 前端
组合优于继承,我们一直在寻求「 解耦 」来把复杂的业务代码简单化。而Hook的最大优点就是代码复用,更简洁。而且Hook在写法上也遵循了「 单一职责模式 」。

 [[380371]]

组合优于继承,我们一直在寻求「 解耦 」来把复杂的业务代码简单化。而Hook的最大优点就是代码复用,更简洁。而且Hook在写法上也遵循了「 单一职责模式 」。

今天主要分享的是在学习Hook之前,我们应该做哪些思考。

  • 数据绑定、状态管理
  • 生命周期、组件挂载卸载
  • 组件传值
  • 节点元素获取
  • 复用逻辑抽离

数据绑定

在react中state的概念是内部状态的管理,它的变更直接会影响页面的渲染。

在hook中把setState拆开了。每一个单个的state的都会是一个单个的状态,单个状态的变更不会影响其他state。我们可以通过useState实现单个状态的初始化定义。

useState的参数可以是一个数字、字符串、布尔值、数组或对象,也可以是一个函数。

同样我们避免不了会使用集合(对象)来处理一些逻辑。

  1. const [count, setCount] = useState(0); 
  2. const [count, setCount] = useState(() => 0); 
  3. const [obj, setObj] = useState({}); 
  4. setObj((prevObj) => { 
  5.   // 也可以使用 Object.assign 
  6.   return { ...prevObj, age: 23 }; 
  7. }); 

一般我们会定义一个初始值initialState,如果这个初始值,需要额外的计算开销,我们可以定义一个函数来处理。需要注意的是,useState 函数只会在初始渲染的时候被调用。

  1. const [state, setState] = useState(() => { 
  2.   // 额外的操作someExpensiveComputation 
  3.   const initialState = someExpensiveComputation(props); 
  4.   return initialState; 
  5. }); 

对于多个state集合的处理,还有另一种方案就是useReducer。

  • 比如单个 state 的状态会影响多个 state 的值的时候。
  • 比如多个 state 的状态会随着某种类型的改变而改变。

如下多个 state 会随着登录、登出、刷新 token 这三种状态的改变而改变。

  1. const [state, dispatch] = React.useReducer( 
  2.   (prevState, action) => { 
  3.     switch (action.type) { 
  4.       case "RESTORE_TOKEN"
  5.         return { 
  6.           ...prevState, 
  7.           userToken: action.token, 
  8.           isLoading: false
  9.         }; 
  10.       case "SIGN_IN"
  11.         return { 
  12.           ...prevState, 
  13.           isSignout: false
  14.           userToken: action.token, 
  15.         }; 
  16.       case "SIGN_OUT"
  17.         return { 
  18.           ...prevState, 
  19.           isSignout: true
  20.           userToken: null
  21.         }; 
  22.     } 
  23.   }, 
  24.   { 
  25.     isLoading: true
  26.     isSignout: false
  27.     userToken: null
  28.   } 
  29. ); 

副作用

hook 提供了一种新的概念来代替生命周期函数,就是useEffect副作用。它被看作是从 React 的纯函数式世界通往命令式世界的逃生通道。

它的执行时机是在屏幕元素渲染结束后延迟执行。

它的作用有:

  • 它可以监控 state 值的变化
  • 它可以处理只运行一次的逻辑,有点类似生命周期 componentDidMount 和 componentWillUnmount 的思维模式,
  • 添加订阅、设置定时器、发送网络请求
  • 更多其他
  1. // 通过的第二个参数来实现只执行一次或监控state值 
  2. useEffect(() => { 
  3.   // ... 
  4. }, []); 
  5.  
  6. // useEffect第一个参数的返回函数就是componentWillUnmount的思想,在组件卸载之前进行 
  7. useEffect(() => { 
  8.   const subscription = props.source.subscribe(); 
  9.   return () => { 
  10.     // 清除订阅 
  11.     subscription.unsubscribe(); 
  12.   }; 
  13. }); 

但是这种延迟执行的机制不能满足我们所有的场景,如果我们想要实现屏幕绘制和副作用同步执行,比如实时修改dom结构等这样的场景,useEffect无法满足,会出现闪屏的效果。

我们可以通过useLayoutEffect来实现,它的执行时机是在组件加载完成后,屏幕绘制之前进行。但这样也有缺点就是阻塞屏幕渲染,可能会出现白屏或停顿。

所以useLayoutEffect的使用场景:

  • 防止闪烁,比较耗时的计算
  • Dom操作
  • componentDidMount和componentDidUpdate的场景

如果只是单独的获取(get操作)就没有必要使用useLayoutEffect。

组件传值

组件传值的核心:

  • 父传子,通过在子组件设置属性;
  • 子传父,通过回调。
  • 多级组件,通过中间状态管理
  1. // 父组件 
  2. function Home() { 
  3.   const [currentTab, setCurrentTab] = useState("msg"); 
  4.   return ( 
  5.     <> 
  6.       <View style={styles.logo}> 
  7.          // 父传子 
  8.         <TabView currentTab={currentTab} setCurrentTab={setCurrentTab} /> 
  9.         // 子传父 
  10.         <CodeView code={code} changeCode={(code)=>setCurrentTab(code)} /> 
  11.       </View
  12.       <Text>{currentTab}</Text> 
  13.     </> 
  14.   ); 
  15.  
  16. //子组件 
  17. function TabView({ currentTab, setCurrentTab }) { 
  18.   return ( 
  19.     <View style={styles.logo}> 
  20.       <Text>{currentTab}</Text> 
  21.       <Button 
  22.         title="修改tab" 
  23.         onPress={() => { 
  24.           setCurrentTab("pass"); 
  25.         }} 
  26.       /> 
  27.     </View
  28.   ); 
  29. //子传父 
  30. function CodeView({ code, changeCode }) { 
  31.   return ( 
  32.     <View style={styles.logo}> 
  33.       <Text>{code}</Text> 
  34.       <Button 
  35.         title="修改tab" 
  36.         onPress={changeCode} 
  37.       /> 
  38.     </View
  39.   ); 

多组件的传值,可以通过context来处理。 

  1. export const MyContent = React.createContext({}); 
  2.  
  3. function Home() { 
  4.   return ( 
  5.     <MyContent.Provider 
  6.       value={{ 
  7.         currentTab, 
  8.         phoneValue, 
  9.         codeValue, 
  10.         setPhoneValue, 
  11.         setCodeValue, 
  12.       }} 
  13.     > 
  14.       <FormItem /> 
  15.       <SwitchItemView /> 
  16.     </MyContent.Provider> 
  17.   ); 
  18.  
  19. function FormItem() { 
  20.   const { phoneValue, setPhoneValue } = useContext(MyContent); 
  21.   return ( 
  22.     <View style={styles.logo}> 
  23.       <Text>{phoneValue}</Text> 
  24.       {/* ...*/} 
  25.     </View
  26.   ); 
  27.  
  28. function SwitchItemView() { 
  29.   const { codeValue, setCodeValue } = useContext(MyContent); 
  30.   return ( 
  31.     <View style={styles.logo}> 
  32.       <Text>{phoneValue}</Text> 
  33.       {/* ...*/} 
  34.     </View
  35.   ); 

元素节点操作

hook通过useRef来创建节点对象,然后通过ref挂载,通过current来获取。

  1. function TextInputWithFocusButton() { 
  2.   const inputEl = useRef(null); 
  3.   const onButtonClick = () => { 
  4.     inputEl.current.focus(); 
  5.   }; 
  6.   return ( 
  7.     <> 
  8.       <input ref={inputEl} type="text" /> 
  9.       <button onClick={onButtonClick}>Focus the input</button> 
  10.     </> 
  11.   ); 

我们可能会封装一些逻辑,自定义一些属性,暴露给父元素,那么我们就会用到useImperativeHandle和forwardRef。

  1. function FancyInput(props, pref) { 
  2.   const inputRef = useRef(); 
  3.   useImperativeHandle(ref, () => ({ 
  4.     focus: () => { 
  5.       inputRef.current.focus(); 
  6.     } 
  7.   })); 
  8.   return <input ref={inputRef} ... />; 
  9.  
  10. FancyInput = forwardRef(FancyInput); 
  11.  
  12. <FancyInput ref={inputRef} />  
  13. // 父组件可以直接调用inputRef.current.focus() 

因为 ref 对象不会把当前 ref 值的变化通知给我们,所以我们必须通过useState和useCallback实现。

  1. function MeasureExample() { 
  2.   const [height, setHeight] = useState(0); 
  3.  
  4.   const measuredRef = useCallback((node) => { 
  5.     if (node !== null) { 
  6.       setHeight(node.getBoundingClientRect().height); 
  7.     } 
  8.   }, []); 
  9.  
  10.   return ( 
  11.     <> 
  12.       <h1 ref={measuredRef}>Hello, world</h1> 
  13.       <h2>The above header is {Math.round(height)}px tall</h2> 
  14.     </> 
  15.   ); 

自定义hook

在代码中,我们会有一些共用的逻辑,我们可以抽离出来比如自定义的防抖节流,自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。

  1. const useDebounce = (fn, ms = 30, deps = []) => { 
  2.   let timeout = useRef(); 
  3.  
  4.   useEffect(() => { 
  5.     if (timeout.current) clearTimeout(timeout.current); 
  6.     timeout.current = setTimeout(() => { 
  7.       fn(); 
  8.     }, ms); 
  9.   }, deps); 
  10.  
  11.   const cancel = () => { 
  12.     clearTimeout(timeout.current); 
  13.     timeout = null
  14.   }; 
  15.   return [cancel]; 
  16. }; 
  17.  
  18. export default useDebounce; 
  19. const Home = (props) => { 
  20.   const [a, setA] = useState(0); 
  21.   const [b, setB] = useState(0); 
  22.   const [cancel] = useDebounce( 
  23.     () => { 
  24.       setB(a); 
  25.     }, 
  26.     2000, 
  27.     [a] 
  28.   ); 
  29.  
  30.   const changeIpt = (e) => { 
  31.     setA(e.target.value); 
  32.   }; 
  33.  
  34.   return ( 
  35.     <div> 
  36.       <input type="text" onChange={changeIpt} /> 
  37.       {b} {a} 
  38.     </div> 
  39.   ); 
  40. }; 

性能优化

单向数据流,各组件层次分明,状态明确,但是当项目体量大,组件嵌套多的时候,性能损耗也非常大,所以我们会做一些性能优化的工作。

可能的优化场景有:

  • 单个 state 的更新会影响全局,有一点需要注意的是,被context包裹的组件,只要value的任何一个变动,都会重新渲染,useMemo和useCallback就会失效。
  • 相同的输入,不再重新计算
  • 父组件的函数在子组件使用的时候

其实useMemo和useCallback的核心思想相同,都是记录上一次的输入,如果下一次输入与上一次相同,将不会计算,直接获取上一次的结果。他们的区别只是形式上的,useMemo返回一个 memoized 值。而useCallback返回的是memoized回调函数。

useMemo缓存计算结果的值。

useCallback主要用于缓存函数。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

  1. const memoizedCallback = useCallback(() => { 
  2.   doSomething(a, b); 
  3. }, [a, b]); 
  4.  
  5. // useMemo 
  6. const [count, setCount] = useState(1); 
  7. const [val, setValue] = useState(""); 
  8. const expensive = useMemo(() => { 
  9.   let sum = 0; 
  10.   for (let i = 0; i < count * 100; i++) { 
  11.     sum += i; 
  12.   } 
  13.   return sum
  14. }, [count]); 
  15.  
  16. return ( 
  17.   <div> 
  18.     <h4> 
  19.       {count}-{expensive} 
  20.     </h4> 
  21.     {val} 
  22.     <div> 
  23.       <button onClick={() => setCount(count + 1)}>+c1</button> 
  24.       <input value={val} onChange={(event) => setValue(event.target.value)} /> 
  25.     </div> 
  26.   </div> 
  27. ); 

捎带了解一下memoized,简单讲就是把函数的计算结果缓存起来,比如递归。

  1. const memoize = function(fn) { 
  2.     const cache = {}; 
  3.     return function() { 
  4.         const key = JSON.stringify(arguments); 
  5.         var value = cache[key]; 
  6.         if(!value) { 
  7.             console.log('新值,执行中...');         // 为了了解过程加入的log,正式场合应该去掉 
  8.             value = [fn.apply(this, arguments)];  // 放在一个数组中,方便应对undefined,null等异常情况 
  9.             cache[key] = value; 
  10.         } else { 
  11.             console.log('来自缓存');               // 为了了解过程加入的log,正式场合应该去掉 
  12.         } 
  13.         return value[0]; 
  14.     } 
  15.  
  16. module.exports = memoize; 
  17. const memoize = require('./memoize.js'); 
  18. const log = console.log; 
  19.  
  20. // 斐波那契数组 
  21. const fibonacci = (n) => { 
  22.     return n < 2  
  23.         ? n 
  24.         : fibonacci(n - 1) + fibonacci(n - 2); 
  25. }; 
  26.  
  27. const memoizeFibonacci = memoize(fibonacci); 
  28.  
  29. log(memoizeFibonacci(45));   // 新值,执行中...;    1134903170  // 等待时间比较长 
  30. log(memoizeFibonacci(45));   // 来自缓存;    1134903170 
  31. log(memoizeFibonacci(45));   // 来自缓存;    1134903170 
  32. log(memoizeFibonacci(45));   // 来自缓存;    1134903170 

本文转载自微信公众号「 惊天码盗」,可以通过以下二维码关注。转载本文请联系 惊天码盗公众号。

责任编辑:武晓燕 来源: 惊天码盗
相关推荐

2011-06-16 20:05:41

SEO

2017-11-30 10:55:16

2022-04-14 11:50:39

函数组件hook

2017-09-11 15:46:36

数据科学语言Java

2016-12-06 16:51:11

互联网时代IT技术

2022-08-01 07:56:23

React Hook开发组件

2020-10-21 11:34:49

React Hook库

2024-01-09 07:26:16

ReactVue前端

2020-05-28 13:33:30

React Hook前端开发

2022-05-06 07:31:01

useEventReactHook

2017-09-28 11:54:11

PHP

2021-03-30 11:29:02

人工智能深度学习

2022-08-02 15:18:00

React开源项目

2017-10-24 14:21:30

机器学习人工智能算法

2018-06-15 22:41:06

开源软件React软件开发

2014-05-14 10:09:07

2020-02-11 09:41:02

Go语言程序员文章

2020-02-05 16:55:11

Go语言程序员文章

2022-12-23 08:34:30

HookReact

2019-04-11 15:45:08

ReactMixin前端
点赞
收藏

51CTO技术栈公众号