Question

我试图弄清楚为什么单击styled-component button时会重新渲染，而未设置button的样式时却没有重新渲染。

我有一个功能组件，可渲染以button样式的可点击styled-components。单击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移到Button之外。每次Button呈现时都会重新创建。这可能是在每次重新渲染时都要考虑新类的原因。

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;

Answer 2

尝试按以下方法在render函数之外提升WrappedButton组件的初始化，并使用React.memo将该组件记住/使其成为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;

防止使用样式化组件重新渲染组件

2 个答案: