实现React的v-show功能

在聊到Vue性能优化的时候,经常会提到v-show和v-if,对于性能优化来说v-show是一个绕不过去的话题,可是React中并没有类似的Api,那么如果React要实现类似的功能应该怎么处理呢?

首先v-show的原理是基于对元素的display属性的控制来实现的,明确这一点之后,结合HOC,一切似乎就变得明朗起来

import React from 'react';

function withShowHide(Component) {
  return function ShowHideWrapper(props) {
    const { visible, ...rest } = props;
    const displayStyle = { display: visible ? 'block' : 'none' };
    return (
      <div style={displayStyle}>
        <Component {...rest} />
      </div>
    );
  };
}

export default withShowHide;

这里定义了一个名为withShowHide的高阶组件，接受一个普通组件作为参数，并返回一个新的组件。新组件将原始组件包裹在一个

import React from 'react';
import withShowHide from './withShowHide';

function My(props) {
  return <div>Hello World</div>;
}

const ShowHideComponent = withShowHide(My);

function App() {
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>Toggle</button>
      <ShowHideComponent visible={visible} />
    </div>
  );
}

export default App;