相違点: 1. フックはクラスよりも簡潔に記述されます; 2. フックのビジネス コードはクラスよりも集約されています; 3. クラス コンポーネントのロジックの再利用では通常、レンダリング プロパティと HOC が使用されますが、反応フックは使用を提供しますロジックを再利用するためのカスタム フック。
このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。
反応フックとクラスコンポーネントの違いは何ですか?反応フックとクラスコンポーネントを比較し、それらの違いについて話しましょう。
関数コンポーネントは独自の状態を持つことができません。フックが登場する前は、関数コンポーネントはステートレスであり、親コンポーネントの状態は props を通じて取得されていましたが、フックでは関数コンポーネントの内部状態を維持するための useState が提供されます。
コンポーネントのライフサイクルは、関数コンポーネントでは監視できません。 useEffect は複数のライフサイクル関数を集約します。
クラス コンポーネントのライフ サイクルはより複雑です (バージョン 15 からバージョン 16 への変更は大きくなります)。
クラス コンポーネント ロジックは再利用が困難です (HOC、レンダリング プロップ)。
私たちは以下を使用します最も単純なカウンター 例:
クラスコンポーネント
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 (
<div>
<p>you click { count }</p>
<button onClick={this.handleClick}>点击</button>
</div>
)
}
}フック
function ExampleOfHooks() {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
}
return (
<div>
<p>you click { count }</p>
<button onClick={handleClick}>点击</button>
</div>
)
}フックを使用したコードは次のとおりであることがわかります。クラスコンポーネントコードと比較して、より簡潔で明確です。
クラス コンポーネントを使用する場合、関数が 2 つのライフ サイクル関数に含まれることがよくあります。これらを別々に記述すると、場合によっては問題が発生する可能性があります。問題は忘れてください。例:
let timer = null
componentDidMount() {
timer = setInterval(() => {
// ...
}, 1000)
}
// ...
componentWillUnmount() {
if (timer) clearInterval(timer)
}タイマーの追加とタイマーのクリアは 2 つの異なるライフサイクル関数に含まれるため、間に他の多くのビジネス コードが存在する可能性があるため、コンポーネントが次の場合にタイマーのクリアを忘れる可能性があります。クリアタイマー機能を追加しないと、メモリリークや継続的なネットワークリクエストなどの問題が発生する可能性があります。
しかし、フックを使用すると、コードがより集中化され、管理しやすくなり、忘れにくくなります:
useEffect(() => {
let timer = setInterval(() => {
// ...
}, 1000)
return () => {
if (timer) clearInterval(timer)
}
}, [//...])クラス コンポーネントのロジック再利用では、通常、レンダー プロパティと HOC が使用されます。 React フックは、ロジックを再利用するためのカスタム フックを提供します。
以下では、例としてページ上のマウス位置を取得するロジックの再利用を取り上げています。
クラス コンポーネントのレンダー プロパティ メソッドの再利用
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カスタム フック メソッドの再利用
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フックを使用すると、ロジックの再利用がより便利になり、使用するとロジックがより明確になることが明らかです。
const [value, setValue] = useState(0)
この構文は ES6 配列構造です。配列の最初の値は宣言された状態で、2 番目の値は状態変化機能。
私の個人的な理解では、各フレームの独立した状態はクロージャー メソッドを使用して実現されます。
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>
</>
)
}コンポーネントのステータスまたはプロパティが更新されると、関数コンポーネントはレンダリングのために再呼び出されます。各レンダリングは独立しており、独自の独立したプロパティと状態を持ち、他のレンダリングには影響しません。
2. useEffectuseEffect(() => {
//handler function...
return () => {
// clean side effect
}
}, [//dep...])
const memoDate = useMemo(() => data, [//dep...])
const memoCb = useCallback(() => {//...}, [//dep...])
比如下面这种场景，改变子组件的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 (
<div>
<p>Parent</p>
<MyContext.Provider value={{name: 'cc', age: 21}}>
<Child />
</MyContext.Provider>
</div>
)
}子组件
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提供值：<MyContext.provide value={{name: 'cc', age: 22}} />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视频教程】
以上が反応フックとクラスの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
