React-组件-内联样式 和 React-组件-列表渲染优化
原创
React-组件-内联样式 和 React-组件-列表渲染优化
原创
杨不易呀
发布于 2023-09-30 14:30:43
发布于 2023-09-30 14:30:43
前言
内联样式是一种强大的工具，它使开发人员能够在组件级别动态设置样式，而不必依赖外部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 算法在比较的时候默认情况下只会进行同层同位置的比较
- 所以在渲染列表时可能会存在性能问题
往后添加元素
image-20220430214548065
往前添加元素
image-20220430214604834
让 diff 算法递归比较同层所有元素
- 给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比
官方文档：https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm
image-20220430214623941
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 的取值唯一，否则会报错
输入图片说明
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
输入图片说明
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
