Reactjs 如何停止React中A和B的重新渲染？

import React，{useState，useffect，useCallback}来自“React”；
导出常量根=（）=>{
const[items，setItems]=useState（[“A”，“B]”）；
const\u onClick=useCallback（项=>{
返回（）=>警报（项目）；
},[]);
返回(
setItems（[“A”、“B”、“C”]）}>按钮
{items.map（（项，索引）=>(
))}
);
};
const Item=React.memo（{Item，onClick}）=>{
useffect（（）=>{
控制台日志（“项：”，项）；
});
返回{item}；
});

如何停止A和B的重新渲染？

---

我想要的结果是，当按下按钮时，控制台上会出现一个备忘录，“Item:C”。

您在错误的位置调用

\u onClick

。您应该调用按钮的

onClick

事件，而不是调用

项

组件

---

检查这些工作。

因为每次渲染时，

的

onClick

都是新的，这将导致A和B重新渲染

您可以使用

React.memo

第二个参数进行检查，例如：

const Item = React.memo(({ item, onClick }) => {
    // ...
    return <button onClick={onClick}>{item}</button>;
}, (prevProps, nextProps) => {
    console.log(Object.is(prevProps.onClick, nextProps.onClick)); // console: false
});

您可以将

\u onClick

更改为：

const _onClick = useCallback(item => alert(item), []);

接下来，将_onClick传递给Item，并更改按钮onClick的执行方式

<Item key={index} item={item} onClick={_onClick} />

//...

<button onClick={() => onClick(item)}>{item}</button>

//...
onClick（item）}>{item}

---

完整代码如下：

import React, { useCallback, useState } from 'react';

export const Root = () => {
    const [items, setItems] = useState(['A', 'B']);

    const _onClick = useCallback(item => alert(item), []);
    return (
        <>
            <button onClick={() => setItems(['A', 'B', 'C'])}>Button</button>
            {items.map((item, index) => (
                <Item key={index} item={item} onClick={_onClick} />
            ))}
        </>
    );
};

const Item = React.memo(({ item, onClick }) => {
    useEffect(() => {
        console.log("Item: ", item);
    });
    return <button onClick={() => onClick(item)}>{item}</button>;
});

import React，{useCallback，useState}来自“React”；
导出常量根=（）=>{
const[items，setItems]=useState（['A'，'B']）；
const _onClick=useCallback（item=>alert（item），[]）；
返回(
setItems（['A'，'B'，'C']）}>按钮
{items.map（（项，索引）=>(
))}
);
};
const Item=React.memo（{Item，onClick}）=>{
useffect（（）=>{
控制台日志（“项：”，项）；
});
返回onClick（item）}>{item}；
});

import React, { useCallback, useState } from 'react';

export const Root = () => {
    const [items, setItems] = useState(['A', 'B']);

    const _onClick = useCallback(item => alert(item), []);
    return (
        <>
            <button onClick={() => setItems(['A', 'B', 'C'])}>Button</button>
            {items.map((item, index) => (
                <Item key={index} item={item} onClick={_onClick} />
            ))}
        </>
    );
};

const Item = React.memo(({ item, onClick }) => {
    useEffect(() => {
        console.log("Item: ", item);
    });
    return <button onClick={() => onClick(item)}>{item}</button>;
});