前言
内联样式是一种强大的工具，它使开发人员能够在组件级别动态设置样式，而不必依赖外部CSS文件。
React 中的样式
- React 并没有像 Vue 那样有提供特定的区域给我们编写 CSS 代码
- 所以你会发现在 React 代码中, CSS 样式的写法千奇百怪
内联样式
内联样式的优点：
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前
state中的状态
内联样式的缺点:
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { color: 'red' } } render() { return ( <div> <p style={{fontSize: '50px', color: this.state.color}}>我是段落1</p> <p style={{fontSize: '50px', color: 'green'}}>我是段落2</p> <button onClick={() => { this.btnClick() }}>按钮 </button> </div> ); } btnClick() { this.setState({ color: 'blue' }) } } export default App;
列表渲染优化
列表渲染优化
- 由于 diff 算法在比较的时候默认情况下只会进行同层同位置的比较
- 所以在渲染列表时可能会存在性能问题
往后添加元素
往前添加元素
让 diff 算法递归比较同层所有元素
- 给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比
官方文档：https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm
App.js:
import React from 'react'; class Home extends React.Component { constructor(props) { super(props); this.state = { heroList: ['鲁班', '虞姬', '黄忠'] } } render() { return ( <div> <ul>{ this.state.heroList.map(name => { return <li key={name}>{name}</li> }) }</ul> <button onClick={() => { this.btnClick() }}>按钮 </button> </div> ) } btnClick() { this.setState({ heroList: ['阿珂', ...this.state.heroList] }) } } class App extends React.Component { render() { return ( <div> <Home/> </div> ) } } export default App;
key 注意点
- 如果列表中出现相同的 key, 所以我们必须保证列表中 key 的取值唯一，否则会报错
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
