标签：box return ref App list PureComponent Recat
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。