使用 styled-components 防止组件重新渲染

Question

我试图弄清楚为什么 styled-component button 在我点击它时会重新呈现，而当 button 没有设置样式时却没有重新呈现。

我有一个功能组件，可以呈现样式为 styled-components 的可点击 button。单击 button 时，操作会按预期触发，但样式 button 会在每次单击时重新呈现，我可以从 chrome devtools 中看到一个新的 class 每次都会生成。

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Button = ({ onClickButton }) => {
  const WrappedButton = styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `;

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
};

export default Button;

当按钮未设置样式时，将触发操作并且不会按预期重新呈现按钮：

return (
  <button 
    type="button"
    onClick={onClickButton} 
  />
)

在此先感谢您的帮助！

Answer 1

尝试如下提升渲染函数之外的 WrappedButton 组件初始化，并使用 React.memo 到 memoize/make 组件 a PureComponent

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const WrappedButton = memo(styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `);

const Button = memo(({ onClickButton }) => {

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
});

export default Button;

Answer 2

您应该将 WrappedButton 移到 Button 之外。每次 Button 渲染时都会重新创建。这可能是每次重新渲染中新 class 的原因。

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const WrappedButton = styled.button`
  background-color: #ccc;
  width: 2rem;
  height: 2rem;
`;

const Button = ({ onClickButton }) => {
  return <WrappedButton type="button" onClick={onClickButton} />;
};

export default Button;

使用 styled-components 防止组件重新渲染

Prevent component re-render with styled-components

javascript

reactjs

styled-components