Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara cangkuk tindak balas dan kelas?
Perbezaan: 1. Cangkuk ditulis lebih ringkas daripada kelas; 2. Kod perniagaan cangkuk lebih diagregatkan daripada kelas 3. Penggunaan semula logik komponen kelas biasanya menggunakan prop render dan HOC, manakala cangkuk tindak balas menyediakan Penggunaan cangkuk tersuai untuk menggunakan semula logik.
Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.
Apakah perbezaan antara cangkuk tindak balas dan komponen kelas? Mari bandingkan cangkuk tindak balas dan komponen kelas dan bercakap tentang perbezaannya.
Komponen fungsi tidak boleh mempunyai keadaannya sendiri. Sebelum cangkuk, komponen fungsi adalah tanpa kewarganegaraan, dan keadaan komponen induk diperoleh melalui prop, tetapi cangkuk menyediakan useState untuk mengekalkan keadaan dalaman komponen fungsi.
Kitaran hayat komponen tidak boleh dipantau dalam komponen fungsi. useEffect mengagregatkan pelbagai fungsi kitaran hayat. Kitaran hayat
komponen kelas adalah lebih rumit (perubahannya besar daripada versi 15 hingga versi 16).
Logik komponen kelas sukar untuk digunakan semula (HOC, render props).
Kami menggunakan pembilang paling ringkas Contohnya:
komponen kelas
class ExampleOfClass extends Component { constructor(props) { super(props) this.state = { count: 1 } } handleClick = () => { let { count } = this.state this.setState({ count: count+1 }) } render() { const { count } = this.state return ( dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846beeyou click { count }94b3e26ee717c64999d7867364b1b4a3 58d87a863b0fd08858af212a24752208点击65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 ) } }
cangkuk
function ExampleOfHooks() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) } return ( <div> <p>you click { count }</p> <button onClick={handleClick}>点击</button> </div> ) }
Anda boleh melihat kod untuk menggunakan cangkuk Ia lebih ringkas dan jelas daripada kod komponen kelas.
Apabila menggunakan komponen kelas, ia sering berlaku bahawa fungsi muncul dalam dua fungsi kitaran hayat mungkin menyebabkannya masalah. Contohnya:
let timer = null componentDidMount() { timer = setInterval(() => { // ... }, 1000) } // ... componentWillUnmount() { if (timer) clearInterval(timer) }
Memandangkan menambah pemasa dan mengosongkan pemasa berada dalam dua fungsi kitaran hayat yang berbeza, mungkin terdapat banyak kod perniagaan lain di antaranya, jadi anda mungkin terlupa mengosongkan pemasa jika ia berada dalam komponen Kegagalan untuk menambah fungsi pemasa yang jelas semasa penyahpasangan boleh menyebabkan masalah seperti kebocoran memori dan permintaan rangkaian yang berterusan.
Tetapi menggunakan cangkuk boleh menjadikan kod lebih terpusat, lebih mudah untuk kita urus, dan tidak mudah dilupakan:
useEffect(() => { let timer = setInterval(() => { // ... }, 1000) return () => { if (timer) clearInterval(timer) } }, [//...])
Penggunaan semula logik komponen kelas biasanya menggunakan prop render dan HOC. Cangkuk bertindak balas menyediakan cangkuk tersuai untuk menggunakan semula logik.
Berikut ialah contoh penggunaan semula logik untuk mendapatkan kedudukan tetikus pada halaman:
Penggunaan semula props render komponen kelas
import React, { Component } from 'react' class MousePosition extends Component { constructor(props) { super(props) this.state = { x: 0, y: 0 } } handleMouseMove = (e) => { const { clientX, clientY } = e this.setState({ x: clientX, y: clientY }) } componentDidMount() { document.addEventListener('mousemove', this.handleMouseMove) } componentWillUnmount() { document.removeEventListener('mousemove', this.handleMouseMove) } render() { const { children } = this.props const { x, y } = this.state return( <div> { children({x, y}) } </div> ) } } // 使用 class Index extends Component { constructor(props) { super(props) } render() { return ( <MousePosition> { ({x, y}) => { return ( <div> <p>x:{x}, y: {y}</p> </div> ) } } </MousePosition> ) } } export default Index
Penggunaan semula kaedah cangkuk tersuai
import React, { useEffect, useState } from 'react' function usePosition() { const [x, setX] = useState(0) const [y, setY] = useState(0) const handleMouseMove = (e) => { const { clientX, clientY } = e setX(clientX) setY(clientY) } useEffect(() => { document.addEventListener('mousemove', handleMouseMove) return () => { document.removeEventListener('mousemove', handleMouseMove) } }) return [ {x, y} ] } // 使用 function Index() { const [position] = usePosition() return( <div> <p>x:{position.x},y:{position.y}</p> </div> ) } export default Index
Ia dapat dilihat dengan jelas bahawa menggunakan cangkuk adalah lebih mudah untuk digunakan semula logik, dan logiknya lebih jelas apabila digunakan.
Syntax
<.>const [value, setValue] = useState(0)
Setiap bingkai mempunyai keadaan bebasSecara peribadi, saya faham bahawa keadaan bebas setiap bingkai dilaksanakan menggunakan kaedah penutupan.
function Example() { const [val, setVal] = useState(0) const timeoutFn = () => { setTimeout(() => { // 取得的值是点击按钮的状态,不是最新的状态 console.log(val) }, 1000) } return ( <> <p>{val}</p> <button onClick={()=>setVal(val+1)}>+</button> <button onClick={timeoutFn}>alertNumber</button> </> ) }Apabila status atau prop komponen dikemas kini, komponen fungsi akan dipanggil semula untuk rendering, dan setiap rendering adalah bebas dan mempunyai prop dan keadaan bebas sendiri, dan tidak akan menjejaskan yang lain render.
Sintaks
useEffect(() => { //handler function... return () => { // clean side effect } }, [//dep...])useEffect menerima fungsi panggil balik dan kebergantungan, apabila kebergantungan berlaku. fungsi panggil balik di dalam akan dilaksanakan hanya apabila terdapat perubahan. useEffect adalah serupa dengan fungsi kitaran hayat komponen kelas didMount, didUpdate dan willUnmount.
Nota
Sintaks
const memoDate = useMemo(() => data, [//dep...]) const memoCb = useCallback(() => {//...}, [//dep...])Apabila mengoptimumkan prestasi komponen, kami biasanya menggunakan React.PureComponent untuk komponen kelas akan dikemas kini sekali dalam shouldUpdate . Bandingkan dan tentukan sama ada kemas kini diperlukan untuk komponen fungsi yang biasanya kami gunakan React.memo. Tetapi apabila menggunakan cangkuk tindak balas, kerana setiap kemas kini pemaparan adalah bebas (keadaan baharu dijana), walaupun React.memo digunakan, ia masih akan dipaparkan semula.
比如下面这种场景,改变子组件的name值后由于父组件更新后每次都会生成新值(addAge函数会改变),所以子组件也会重新渲染。
function Parent() { const [name, setName] = useState('cc') const [age, setAge] = useState(22) const addAge = () => { setAge(age + 1) } return ( <> <p>父组件</p> <input value={name} onChange={(e) => setName(e.target.value)} /> <p>age: {age}</p> <p>-------------------------</p> <Child addAge={addAge} /> </> ) } const Child = memo((props) => { const { addAge } = props console.log('child component update') return ( <> <p>子组件</p> <button onClick={addAge}>click</button> </> ) })
使用useCallback优化
function Parent() { const [name, setName] = useState('cc') const [age, setAge] = useState(22) const addAge = useCallback(() => { setAge(age + 1) }, [age]) return ( <> <p>父组件</p> <input value={name} onChange={(e) => setName(e.target.value)} /> <p>age: {age}</p> <p>-------------------------</p> <Child addAge={addAge} /> </> ) } const Child = memo((props) => { const { addAge } = props console.log('child component update') return ( <> <p>子组件</p> <button onClick={addAge}>click</button> </> ) })
只有useCallback的依赖性发生变化时,才会重新生成memorize函数。所以当改变name的状态是addAge不会变化。
useRef类似于react.createRef。
const node = useRef(initRef)
useRef 返回一个可变的 ref 对象,其 current 属性被初始化为传入的参数(initRef)
作用在DOM上
const node = useRef(null) <input ref={node} />
这样可以通过node.current属性访问到该DOM元素。
需要注意的是useRef创建的对象在组件的整个生命周期内保持不变,也就是说每次重新渲染函数组件时,返回的ref 对象都是同一个(使用 React.createRef ,每次重新渲染组件都会重新创建 ref)。
useReducer类似于redux中的reducer。
语法
const [state, dispatch] = useReducer(reducer, initstate)
useReducer传入一个计算函数和初始化state,类似于redux。通过返回的state我们可以访问状态,通过dispatch可以对状态作修改。
const initstate = 0; function reducer(state, action) { switch (action.type) { case 'increment': return {number: state.number + 1}; case 'decrement': return {number: state.number - 1}; default: throw new Error(); } } function Counter(){ const [state, dispatch] = useReducer(reducer, initstate); return ( <> Count: {state.number} <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> ) }
通过useContext我们可以更加方便的获取上层组件提供的context。
父组件
import React, { createContext, Children } from 'react' import Child from './child' export const MyContext = createContext() export default function Parent() { return ( dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846beeParent94b3e26ee717c64999d7867364b1b4a3 6c114b46cb8836ff0ac83d93f4259369 b709c9e9a1f23de0af93c9c27ea4dcef 8e66e6aff1f0a13ebced51b2c1b5d182 16b28748ea4df4d9c2150843fecfba68 ) }
子组件
import React, { useContext } from 'react' import { MyContext } from './parent' export default function Parent() { const data = useContext(MyContext) // 获取父组件提供的context console.log(data) return ( <div> <p>Child</p> </div> ) }
使用步骤
context:export const MyContext = createContext()
provider
和value
提供值:48721ce1b4e79a5bb092f89212a3882a
context:import { MyContext } from './parent'
const data = useContext(MyContext)
不过在多数情况下我们都不建议使用context
,因为会增加组件的耦合性。
useEffect 在全部渲染完毕后才会执行;useLayoutEffect 会在 浏览器 layout之后,painting之前执行,并且会柱塞DOM;可以使用它来读取 DOM 布局并同步触发重渲染。
export default function LayoutEffect() { const [color, setColor] = useState('red') useLayoutEffect(() => { alert(color) // 会阻塞DOM的渲染 }); useEffect(() => { alert(color) // 不会阻塞 }) return ( <> <div id="myDiv" style={{ background: color }}>颜色</div> <button onClick={() => setColor('red')}>红</button> <button onClick={() => setColor('yellow')}>黄</button> </> ) }
上面的例子中useLayoutEffect会在painting之前执行,useEffect在painting之后执行。
hooks让函数组件拥有了内部状态、生命周期,使用hooks让代码更加的简介,自定义hooks方便了对逻辑的复用,并且摆脱了class组件的this问题;但是在使用hooks时会产生一些闭包问题,需要仔细使用。
【相关推荐:Redis视频教程】
Atas ialah kandungan terperinci Apakah perbezaan antara cangkuk tindak balas dan kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!