3个React技巧

网络安全芝麻鱼 lv.1

发布时间：2023-10-18 14:52:34 155

在Fragment上使用key值

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

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

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

pokemons.map(pokemon => (
  
    Name: 
    {pokemon}
  
))

创建一个变量标签

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

 // 渲染为button按钮
 // 渲染为a标签

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

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

 // 渲染为button按钮
 // 渲染为a标签

使用useReducer实现useState

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

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

  );
}

export default App;

手动重新渲染组件

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

您可以执行以下操作：

function App() {
  const [, rerender] = useState()
  function handleRefresh () {
    rerender({})
  }
  return (
    
      hello

      
    

  );
}


export default App;

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

文章来源： https://blog.51cto.com/u_11415078/5879308

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。