如何运用React的三大技巧提升前端开发效率？

本文共计507个文字，预计阅读时间需要3分钟。

在Fragment中使用key值时，不能直接添加key，但可以使用React.Fragment代替map方法，如下所示：

jsxconst pokemons=['Charizard', 'Mr. Mime', 'Jynx'];pokemons.map(pokemon=> ( {pokemon} ))

在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函数来引起重新渲染。