如何防止 React 中的功能组件重新渲染答案

【问题标题】：How to prevent re-rendering in functional component in React如何防止 React 中的功能组件重新渲染
【发布时间】：2021-09-29 13:24:03
【问题描述】：

当我运行这个主页组件时，它会渲染很多次。如何停止这种不必要的渲染。请帮我解决这个问题。由于我们在功能组件中没有 ShouldComponentUpdate ，如何处理这个问题。如果可能，请给我发送实时代码示例

const Home = (props) => {

  const [conversations,setConversations]=useState([]);
  const dispatch=useDispatch();
  const auth=useSelector(state=>state.auth);
  const conv=useSelector(state=>state.conversations);

  console.log(auth);
  

  useEffect(()=>{
    dispatch(getConversations(auth.user._id));
    setConversations(conv.conversations);
  },[auth,conv]);
  return(
    <>
    <Layout />
        <div className="messenger">
          <div className="chatMenu">
            <div className="chatMenuWrapper">
              <input placeholder="Search for friends" className="chatMenuInput"/>
              {
                conversations.map((c)=>{return <Conversations/>})
              }
              
            </div>
          </div>
          <div className="chatBox">
            <div className="chatBoxWrapper">
              <div className="chatBoxTop">
                <Message/>
                <Message own={true}/>
                <Message/>
                
              </div>
              <div className="chatBoxBottom">
                <textarea className="chatMessageInput" placeholder="write something"> 
                </textarea>
                <button className="chatSubmitButton">Send</button>
              </div>
            </div>
          </div>
          <div className="chatOnline">
            <div className="chatOnlineWrapper">
              <ChatOnline/>
            </div>
          </div>
        </div>
     </>
   )

 }

export default Home;

【问题讨论】：

getConversations 修改 conv?
React 组件在其父树被重新渲染时重新渲染。此外，控制台登录功能体不能准确衡量组件何时重新呈现，请使用useEffect。此组件重新渲染时是否存在问题或问题？你为什么要阻止渲染？如果您确实需要尝试防止渲染，可以使用memo HOC。
它没有造成任何问题，只是为了优化和应用程序的性能
一般来说，如果没有渲染问题，就不要过早优化。 React 开箱即用地进行了很好的优化。

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

最好的解释在这里 - https://reactjs.org/docs/hooks-reference.html#usereducer

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子级或触发效果。（React 使用 Object.is 比较算法。）

请注意，React 在退出之前可能仍需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“深入”到树中。如果您在渲染时进行昂贵的计算，您可以使用 useMemo 对其进行优化。

【讨论】：