3个React技巧

在Fragment上使用key值

const pokemons = ['Charizard', 'Mr. Mime', 'Jynx']

pokemons.map(pokemon => (
  <>
    <strong>Name: </strong>
    <span>{pokemon}</span>
  </>
))

空标签不能加key值，但是可以使用React.Fragment代替

pokemons.map(pokemon => (
  <React.Fragment key={pokemon}>
    <strong>Name: </strong>
    <span>{pokemon}</span>
  </React.Fragment>
))

创建一个变量标签

const Button = ({ as = 'button', ...props }) => React.createElement(as, props)

<Button>A Button</Button> // 渲染为button按钮
<Button as="a">A Link</Button> // 渲染为a标签

其实这个写法不好，我们可以这样，可以将属性作为组件来使用，react中称为render props

const Button = ({ Component = 'button', ...props }) => <Component {...props} />

<Button>A Button</Button> // 渲染为button按钮
<Button Component="a">A Link</Button> // 渲染为a标签

使用useReducer实现useState

如果直接从useReducer返回操作，则其行为与useState几乎相同。

function App() {
  const [name, setName] = useReducer((_, value) => value, '请输入');
  return (
    <div className="App">
      <input value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

export default App;

手动重新渲染组件

您是否需要手动重新渲染组件？ 例如，您需要重新渲染组件，但是没有任何状态或可以触摸的任何内容。 假设出于某种奇怪的原因，您想在单击按钮时执行此操作。

您可以执行以下操作：

function App() {
  const [, rerender] = useState()
  function handleRefresh () {
    rerender({})
  }
  return (
    <div className="App">
      <div>hello</div>
      <button onClick={handleRefresh}>按钮</button>
    </div>
  );
}


export default App;

您使用useState，但实际上并不需要状态本身。 您只需要setState函数来引起重新渲染。