-
案例一：不可变数据的力量
案例效果图
重要:不管是对象还是数组都是引用类型（保存的都是地址）,意味着在内存里面会开辟一块内存空间，由指针指向。
添加数据与增加年龄:
import React, { Component, PureComponent } from "react";
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
friends: [
{
name: "lilei",
age: 18,
id: 1,
},
{
name: "zhangsan",
age: 8,
id: 2,
},
{
name: "lucy",
age: 33,
id: 3,
},
],
};
}
render() {
return (
<div>
<ul>
{this.state.friends.map((item, index) => {
return (
<li key={item.id}>
姓名:{item.name}
年龄:{item.age}
<button onClick={(e) => this.increase(index)}>年龄+1</button>
</li>
);
})}
</ul>
<button onClick={(e) => this.insertData()}>添加新数据</button>
</div>
);
}
insertData() {
// 不推荐直接push这样做,因为如果当前组件继承的是PureComponent,那么页面将无法更新,因为
// 在生命周期中shouldComponentUpdate(newProps,newState)比较时对比friends都是同一个内存地址
//错误示范开始
// this.state.friends.push({ name: "哈哈", age: 1, id: 88 });
// this.setState({
// friends: this.state.friends,
// });
// 错误示范结束
// 推荐下面的写法
const newFriends = [...this.state.friends]; //新开出地址
newFriends.push({ name: "哈哈", age: 1, id: 88 });
this.setState({
friends:newFriends
})
}
increase(index) {
console.log(index);
//错误示范开始
// this.state.friends[index].age +=1;
// this.setState({
// friends:this.state.friends
// })
//错误示范结束
//推荐下面的写法
const newFriends = [...this.state.friends];
newFriends[index].age += 1;
this.setState({
friends:newFriends
})
}
}
通常来说，我们的组件都可以直接继承PureComponent,这样可以优化部分性能
-
案例二：使用第三方events组件库传值
1.安装过程中如出现node版本不匹配:The engine “node“ is incompatible with this module..
// 步骤一:
yarn config set ignore-engines true
yarn add events
2.使用后记得销毁
import React, { PureComponent } from 'react'
import { EventEmitter } from 'events'
const eventBus = new EventEmitter();
export default class App extends PureComponent {
render() {
return (
<div>
<Home></Home>
<Header></Header>
</div>
)
}
}
export class Home extends PureComponent {
componentDidMount(){
eventBus.addListener("sayHello",this.handelLister)
}
componentWillUnmount(){
eventBus.removeListener("sayHello",this.handelLister)
}
handelLister(a,b){
console.log(a);
console.log(b);
}
render() {
return (
<div>home</div>
)
}
}
export class Header extends PureComponent {
render() {
return (
<div>
<div>Header</div>
<button onClick={e=>this.add()}>点击传值</button>
</div>
)
}
add(){
eventBus.emit("sayHello",123,"xiao")
}
}
-
案例三：使用ref操作DOM元素
import React, { PureComponent, createRef } from "react";
export default class App extends PureComponent {
constructor(props) {
super();
this.state = {};
this.titleRef = createRef(); // 方式二用到
this.titleEl = null ; // 方式三用到
this.classRef = createRef();
}
render() {
return (
<div>
<h2 ref="stringRef">hello react</h2>
<h2 ref={this.titleRef}>hello react</h2>
<h2 ref={(arg)=>this.titleEl=arg}>hello react</h2>
<button onClick={e=>this.changeText()}>改变文字</button>
<hr></hr>
<Counter ref={this.classRef}></Counter>
</div>
);
}
changeText(){
// 方式一:string--已经不推荐，放弃
this.refs.stringRef.innerHTML = "hello xxx"
// 方式二:对象--官方推荐
this.titleRef.current.innerHTML = "hello yyy"
// 方式三:函数--方式
this.titleEl.innerHTML = "hello zzz"
console.log(this.classRef.current);
}
}
export class Counter extends PureComponent{
constructor(props){
super()
this.state={
counter:1
}
}
render(){
return(
<div>
{this.state.counter}
<button onClick={e=>this.increase()}>couner里面的按钮</button>
</div>
)
}
increase(){
this.setState({
counter:this.state.counter+1
})
}
}
ref属性可以用于HTML元素，也可以用于class组件，但是不能在函数组件上使用ref属性，因为他们没有实例，但是：
- 某些时候，我们可能想要获取函数式组件中的某个DOM元素；
- 这个时候我们可以通过React.forwardRef,后面我们在hooks中如何使用ref
