react讲解
Posted stay_少年与梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react讲解相关的知识，希望对你有一定的参考价值。
文章目录
前言
今天我们来学习react 的PureComponent、ref、children、dangerouslySetInnerhtml以及key的一些内容。
一、PureComponent
作用：PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致。
代码示例：
import React,PureComponent from 'react';
class App extends PureComponent
state =
name: '尖叫',
list:["运动饮料1","运动饮料2","运动饮料3",]
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("新口味");
this.setState(list:[...list])
>扩大</button>
</div>
);
export default App;
代码解释：
加上PureComponent之后,只能浅显进行比较,如果数据是对象直接赋值没有结果,如果用结构赋值,可以触发,如果是字符串,或数值可以直接输出
// this.setState(list:[…list, ]) 可以输出值
PureComponent和Component的区别:
PureComponent每次做修改,只有发生变化后才会修改;
Component:每次做修改,无论和原数组是否一样都会更新。
二、ref
作用：获取react的DOM的节点
案例：利用ref 做一个滚动效果
步骤：
1.首先: 安装better-scroll插件 npm install better-scroll
2.接着引入better-scroll
3.使用better-scroll 需要实例化(dom节点)
dom节点通过ref设置,this.refs获取
代码如下：
import React,createRef, PureComponent from 'react';
import BScroll from 'better-scroll'
// new BScroll()
let list =[...(".".repeat(100))];
console.log(list);
class App extends PureComponent
box = createRef();
list = createRef();
componentDidMount()
console.log(this.refs);
// new BScroll(this.refs.box)
new BScroll(this.box.current)
render()
return (
<div style=
height:"300px",
border:"1px solid #000",
overflow:"hidden",
ref="box"
ref = this.box
>
<ul
style=
margin:0,
padding:0,
listStyle:"none"
>
list.map((item,index)=>
return <li key=index>这是第index个li</li>
)
</ul>
</div>
);
export default App;
三.children
组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
可以自定义结构的组件的常用形式
- children
- 传递函数
- 传递子组件
代码示例：
import React, PureComponent from 'react';
class Popwindows extends PureComponent
state =
close:false,
render()
// console.log(this);
let close =this.state;
let children = this.props;
return (
<div style=
border: '1px solid #000',
display:close? "none":"block"
>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>
<h1>今天天气不错</h1>
<p>明天也还行</p>
<p>夏天快都</p>
</Popwindows>):""
man?(<Popwindows>
<h1>夏天快乐</h1>
<h1>今天天气不错</h1>
<p>秋天</p>
<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>
<h1>今天天气不错</h1>
<p>明天也还行</p>`;
class App extends PureComponent
render()
return (
<div dangerouslySetInnerHTML=__html:message>
</div>
)
export default App;
key 的问题
在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比
代码示例：
import React, PureComponent from 'react';
class App extends PureComponent
state=
data:[
id:0,
content: '第一条数据'
,
id:1,
content: '第2条数据'
,
id:2,
content: '第3条数据'
,
id:3,
content: '第4条数据'
,
id:4,
content: '第5条数据'
,
id:5,
content: '第6条数据'
,
]
;
render()
let data = this.state;
return (
<div>
data.map((item, index)=>
return <p key=index>
item.content
<a onClick=()=>
data=data.filter(itemData=>itemData !== item)
this.setState(
data:[...data]
)
>删除</a>
</p>
)
</div>
)
export default App;
总结
今天学习的内容不多，也不是很难，对我们的学习有很大的帮助，我们要好好学习一下。
以上是关于react讲解的主要内容，如果未能解决你的问题，请参考以下文章