og

React hooks的几个demo

Snipaste_20200526_165641.jpg 前几个月把我的初学React的项目Mysite全改成了Hooks,现在发现对hooks尽然没啥深的印象了

下面几个demo利于快速上手,反正我是万年计数器😂 😂

useState用法

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
import React, { useState } from 'react'; function Counter({ initialCount }) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); } export default Counter

当initialCount需要计算时,可以写成一个函数,但只会在初始渲染时计算,比如下面initialCount=0的话,初始会变成1,但reset就会变成0

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
import React, { useState } from 'react'; function Counter({ initialCount }) { const [count, setCount] = useState(()=>initialCount+1); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); } export default Counter

useEffect用法

  • useEffect是在渲染DOM结束以后才会调用!
  • useEffect不指定依赖的话每次渲染都会进行,
  • useEffect指定空依赖的话挂载渲染一次,
  • 尽量把有依赖的函数写在useEffect的作用域里
        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
import React, { useState, useEffect } from 'react'; function Counter({ initialCount }) { const [count, setCount] = useState(() => initialCount + 1); useEffect(() => {//与 componentDidMount、componentDidUpdate console.log("count发生变化了", count) }, [count]) //用useEffect简单的一个防抖 useEffect(() => { console.log("timer") const timer = setTimeout(()=>{console.log("我发送了一个请求",count)}, 800) return () => { clearTimeout(timer) console.log("clear") } }, [count]) return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); } export default Counter

useContext用法

偷个懒直接拿官网的,用法已经很清晰了

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
const themes = { light: { foreground: "#000000", background: "#eeeeee" }, dark: { foreground: "#ffffff", background: "#222222" } }; const ThemeContext = React.createContext(themes.light); function App() { return ( <ThemeContext.Provider value={themes.dark}> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar(props) { return ( <div> <ThemedButton /> </div> ); } function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); } export default App

useRef

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
import React, { useRef } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` 指向已挂载到 DOM 上的文本输入元素 inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } export default TextInputWithFocusButton

useImperativeHandle

useImperativeHandle 应当与 forwardRef 一起使用

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
import React, { useRef, forwardRef, useImperativeHandle, useState } from 'react'; function FancyInput(props, ref) { const inputRef = useRef(); const [count, setCount] = useState(0) useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); inputRef.current.value = count } }), [count]); return ( <div> <input ref={inputRef} /> <div>{count}</div> <button onClick={() => setCount(prevCount => prevCount + 1)} >count</button> </div> ) } const Son = forwardRef(FancyInput); const Parent = props => { const fancyInputRef = useRef(); return ( <div> <Son ref={fancyInputRef} /> <button onClick={() => fancyInputRef.current.focus()} >父组件调用子组件的 focus</button> </div> ) } export default Parent

useLayoutEffect

99%用不到 useLayoutEffect,useEffect都试试,useLayoutEffect可以消除闪动,碰到闪硕时可以尝试useLayoutEffect

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
import React, { useState, useLayoutEffect,useEffect } from 'react'; const EffectRender = () => { const [value, setValue] = useState(0); useLayoutEffect(() => { if (value === 0) { setValue(10 + Math.random() * 200); } }, [value]); console.log('render', value); return ( < div onClick={() => setValue(0)} > value: {value} </div> ); }; export default EffectRender

useDebugValue

仅开发工具中使用

useReducer,useCallback,useMemo之后做单独做介绍

——THE END——

Article at   2020/05/26 17:07  Published  code  Category,viewed  215  times

Relevant tags:    React 

Address:   https://www.kedong.me/article/16

Copyright Notice: Freely reproduced for non-commercial use