Recat PureComponent
作者：互联网
PureComponent
PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致
浅比较：新修改的数据与原本的数据如果一样则不予更新，否则更新
1) 字符串正常
2) 对象的话，存的是地址，比较的也是地址，按照地址再去找具体的值，所以没更换新地址的话，那么原本去赋值就不太行，
需要解构赋值，this.setState({list:[…list]})
Component 不管与原数据是否一样都重新全部更新
–App.js
import React, {PureComponent, Component } from 'react';
// Component 不管与原数据是否一样都重新全部更新
// PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,// 其他和 Component 完全一致// 浅比较：新修改的数据与原本的数据如果一样则不予更新，否则更新// 1) 字符串正常// 2) 对象的话，存的是地址，比较的也是地址，按照地址再去找具体的值，// 所以没更换新地址的话，那么原本去赋值就不太行，// 需要解构赋值，this.setState({list:[...list]})class App extends
PureComponent {
state = {
name:"尖叫",
list:["运动饮料-01","运动饮料-02","运动饮料-03"]
}
render(){
let {name,list} = this.state;
return(
<div>
<h1>{name}</h1>
<ul>
{
list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
<button onClick={()=>{
this.setState({name:"红牛"})
}}>升级</button>
<button onClick={()=>{
list.push("新口味");
// 使用PureComponent时，注意使用解构赋值的方式！！！
this.setState({list:[...list]})
//this.setState({list}) //PureComponent下使用这个的话，扩大功能实现不了
}}>扩大</button>
</div>
)
}}
export default App;
–index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById('root'));
component与PureComponent的区别
如果使用Component，则不管与原数据是否一样都会重新全部更新；
以下是使用 PureComponent 的情况：修改的数据与原本的若一样则不予更新
点 升级 按钮：
点 扩大 按钮：
ref
旧版 - string ref
主流 - createRef()
*注意：在 组件挂载完成之后及更新之后使用
本次结合一个滚动小插件来使用ref：
new BScroll()：()内填入要滚动的对象，比较适用于移动端，可以拖拽，不能滚轮滑动
1.旧版用法示例：
import React, {PureComponent, createRef } from 'react';
import BScroll from "better-scroll"
// 滚动小插件：// new BScroll()，()内填入要滚动的对象// 注意：只能在 组件挂载完成之后及更新之后使用！！！！！！
// 新的小写法 ~ ~ ~
let list = [...(".".repeat(100))];
console.log(list)
class App extends PureComponent {
// 新版的一个小弊端：需要新的话需要再重新创建一个，再绑到一个新的
// box = createRef();// 2.新版ref写法（主流方式）----- 需要先在类里创建一个空的，存在box当中
// list = createRef();
componentDidMount(){
console.log(this); //新版的写法时，不在refs里了，多了一个box，box: {current: div}
console.log(this.refs); //ref的集合，旧版含有集合，新版写法里没有
console.log(this.refs.box);
// console.log(this.box.current);
new BScroll(this.refs.box);//1.旧版 ***
// new BScroll(this.box.current);//2.新版-----
}
render(){
return(
<div style={{
height:"300px",
border:"1px solid #000",
overflow:"hidden"
}}
ref="box" // 1.旧版*** 绑定 其他地方例如：挂载完成之后及更新之后的生命周期函数 可以获取到
// ref = {this.box} // 2.新版----- 绑到box上，box属性中存了一个ref
>
<ul style={{
margin:0,
padding:0,
listStyle:"none"
}}
ref="list"
// ref = {this.list} //输出this时，则会多出一个list属性 list: {current: ul}
>
{
list.map((item,index)=>{
return <li key={index}>这是第{index+1}个li</li>
})
}
</ul>
</div>
)
}
}
export default App;
1.新版、主流版本用法示例：
import React, {PureComponent, createRef } from 'react';
import BScroll from "better-scroll"
let list = [...(".".repeat(100))];
console.log(list)
class App extends PureComponent {
// 新版的一个小弊端：需要新的话需要再重新创建一个，再绑到一个新的
box = createRef();// 2.新版ref写法（主流方式）----- 需要先在类里创建一个空的，存在box当中
list = createRef();
componentDidMount(){
console.log(this); //新版的写法时，不在refs里了，多了一个box，box: {current: div}
console.log(this.refs); //ref的集合，旧版含有集合，新版写法里没有
console.log(this.box.current);
new BScroll(this.box.current);//2.新版-----
}
render(){
return(
<div style={{
height:"300px",
border:"1px solid #000",
overflow:"hidden"
}}
ref = {this.box} // 2.新版----- 绑到box上，box属性中存了一个ref
>
<ul style={{
margin:0,
padding:0,
listStyle:"none"
}
ref = {this.list} //输出this时，则会多出一个list属性 list: {current: ul}
>
{
list.map((item,index)=>{
return <li key={index}>这是第{index+1}个li</li>
})
}
</ul>
</div>
)
}}
export default App;
children
组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
可以自定义结构的组件的常用形式
children
传递函数
传递子组件
示例一：
import React, {PureComponent} from 'react';
class Child extends PureComponent {
render(){
console.log(this); //接收到了，在props里
let {children} = this.props;
return(
<div>{children}</div>
)
}}
class App extends PureComponent {
render(){
return(
<div>
<Child>
{/* 传标签或者字符串都可 */}
<h1>今天的天气很不错</h1>
<p>明天的天气也还行</p>
{
["呵呵","哈哈"]
}
</Child>
</div>
)
}}
export default App;
示例二：弹框需求
import React, {PureComponent} from 'react';
class Popwindows extends PureComponent {
state={
close:false
}
render(){
let {close} = this.state;
let {children} = this.props;
return(<div style={{
border:"1px solid #000",
display:close ? "none" :"block"
}}>
{/* 外面传什么这里自定义的children显示什么 */}
{children}
<button onClick={()=>{
this.setState({
close:true
})
}}>关闭</button>
</div>)
}}
class App extends PureComponent {
state = {
show:false,
man:false
}
render(){
let {show,man} = this.state;
return(
<div>
{show?(<Popwindows>
<h1>夏天快乐</h1>
<p>夏天都快过去了</p>
</Popwindows>):""}
{man?(<Popwindows>
<h1>秋天快乐</h1>
<p>秋天都快来了</p>
</Popwindows>):""}
<button onClick={()=>{
this.setState({show:true})
}}>夏天来了</button>
<button onClick={()=>{
this.setState({man:true})
}}>秋天来了</button>
</div>
)
}}
export default App;
默认状态
分别点“夏天来了”，“秋天来了”的按钮：点关闭则消失
dangerouslySetInnerHTML
直接设置标签的 innerHTML
import React, {PureComponent} from 'react';/*
只能接后端返回回来的校检过的安全的数据
*/
let message = `
<h1>夏天快乐</h1>
<p>夏天都快过去了</p>
`class App extends PureComponent {
render(){
return(
<div dangerouslySetInnerHTML={{
__html:message
}}>
</div>
)
}}
export default App;
key 的问题
在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比
一个列表中的每一项 key 是唯一的
如果列表中发生顺序等操作变化，key 一定要用数据的id
import React, {PureComponent} from 'react';
class App extends PureComponent {
state={
data:[
{
id:0,
content:"第1条数据"
},
{
id:1,
content:"第2条数据"
},
{
id:2,
content:"第3条数据"
},
{
id:3,
content:"第4条数据"
},
{
id:4,
content:"第5条数据"
}
]
}
render(){
let {data} = this.state;
return(
<div>
{
data.map((item,index)=>{
{/* 尽量不要用下标索引值index为key，有一个变则会整体都变，很耗性能。
用id则会一一进行对比，看是否发生了改变，没变则不动，改变的则进行变动。则只会改变选中的id对应的数据，不会整体都变
DOM最耗性能，计算功能本来就是计算机擅长的
*/}
// return <p key={index}>
return <p key={item.id}>
{item.content}
<a onClick={()=>{
data = data.filter(itemData=>itemData!==item)
this.setState({
data:[...data]
})
}}>删除</a>
</p>
})
}
</div>
)
}}
export default App;
当使用id时 return
，则只会改变选中的id对应的数据 √
当使用index时 return ，则数据整体都变，耗性能
标签：box,return,ref,App,list,PureComponent,Recat 来源： https://blog.csdn.net/Y2730415540/article/details/110826013