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

Question

我试图弄清楚为什么styled-component button当我点击a 时会重新渲染它，而在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;