React---新扩展Context和组件优化

2021年09月15日 阅读数:4
这篇文章主要向大家介绍React---新扩展Context和组件优化,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、Context

1. 理解
   一种组件间通讯方式, 经常使用于【祖组件】与【后代组件】间通讯
2. 使用
  1) 建立Context容器对象:
      const XxxContext = React.createContext()  
    
  2) 渲染子组时,外面包裹xxxContext.Provider, 经过value属性给后代组件传递数据:
      <xxxContext.Provider value={数据}>
          子组件
      </xxxContext.Provider>
    
  3) 后代组件读取数据:

      //第一种方式:仅适用于类组件 
        static contextType = xxxContext  // 声明接收context
        this.context // 读取context中的value数据
      
      //第二种方式: 函数组件与类组件均可以
        <xxxContext.Consumer>
          {
            value => ( // value就是context中的value数据
              要显示的内容
            )
          }
        </xxxContext.Consumer>

3. 注意
    在应用开发中通常不用context, 通常都用它封装react插件
4. 代码
 1 import React, { Component } from 'react'
 2 import './index.css'
 3 
 4 //建立Context对象
 5 const MyContext = React.createContext()
 6 const {Provider,Consumer} = MyContext
 7 export default class A extends Component {
 8 
 9     state = {username:'tom',age:18}
10 
11     render() {
12         const {username,age} = this.state
13         return (
14             <div className="parent">
15                 <h3>我是A组件</h3>
16                 <h4>个人用户名是:{username}</h4>
17                 <Provider value={{username,age}}>
18                     <B/>
19                 </Provider>
20             </div>
21         )
22     }
23 }
24 
25 class B extends Component {
26     render() {
27         return (
28             <div className="child">
29                 <h3>我是B组件</h3>
30                 <C/>
31             </div>
32         )
33     }
34 }
35 
36 /* class C extends Component {
37     //声明接收context
38     static contextType = MyContext
39     render() {
40         const {username,age} = this.context
41         return (
42             <div className="grand">
43                 <h3>我是C组件</h3>
44                 <h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
45             </div>
46         )
47     }
48 } */
49 
50 function C(){
51     return (
52         <div className="grand">
53             <h3>我是C组件</h3>
54             <h4>我从A组件接收到的用户名:
55             <Consumer>
56                 {value => `${value.username},年龄是${value.age}`}
57             </Consumer>
58             </h4>
59         </div>
60     )
61 }

2、optimize组件优化

1. Component的2个问题 
     1)只要执行setState(),即便不改变状态数据, 组件也会从新render()
     2) 只当前组件从新render(), 就会自动从新render子组件 ==> 效率低

2. 效率高的作法
    只有当组件的state或props数据发生改变时才从新render()
3. 缘由
    Component中的shouldComponentUpdate()老是返回true
4. 解决

      方法1: 
          重写shouldComponentUpdate()方法
          比较新旧state或props数据, 若是有变化才返回true, 若是没有返回false
      方法2:  
          使用PureComponent
          PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
          注意: 
              只是进行state和props数据的浅比较, 若是只是数据对象内部数据变了, 返回false  
              不要直接修改state数据, 而是要产生新数据
      项目中通常使用PureComponent来优化

5. 代码css

 1 import React, { PureComponent } from 'react'
 2 import './index.css'
 3 
 4 export default class Parent extends PureComponent {
 5 
 6     state = {carName:"奔驰c36",stus:['小张','小李','小王']}
 7 
 8     addStu = ()=>{
 9         /* const {stus} = this.state
10         stus.unshift('小刘')
11         this.setState({stus}) */
12 
13         const {stus} = this.state
14         this.setState({stus:['小刘',...stus]})
15     }
16 
17     changeCar = ()=>{
18         //this.setState({carName:'迈巴赫'})
19 
20         const obj = this.state
21         obj.carName = '迈巴赫'
22         console.log(obj === this.state);
23         this.setState(obj)
24     }
25 
26     /* shouldComponentUpdate(nextProps,nextState){
27         // console.log(this.props,this.state); //目前的props和state
28         // console.log(nextProps,nextState); //接下要变化的目标props,目标state
29         return !this.state.carName === nextState.carName
30     } */
31 
32     render() {
33         console.log('Parent---render');
34         const {carName} = this.state
35         return (
36             <div className="parent">
37                 <h3>我是Parent组件</h3>
38                 {this.state.stus}&nbsp;
39                 <span>个人车名字是:{carName}</span><br/>
40                 <button onClick={this.changeCar}>点我换车</button>
41                 <button onClick={this.addStu}>添加一个小刘</button>
42                 <Child carName="奥拓"/>
43             </div>
44         )
45     }
46 }
47 
48 class Child extends PureComponent {
49 
50     /* shouldComponentUpdate(nextProps,nextState){
51         console.log(this.props,this.state); //目前的props和state
52         console.log(nextProps,nextState); //接下要变化的目标props,目标state
53         return !this.props.carName === nextProps.carName
54     } */
55 
56     render() {
57         console.log('Child---render');
58         return (
59             <div className="child">
60                 <h3>我是Child组件</h3>
61                 <span>我接到的车是:{this.props.carName}</span>
62             </div>
63         )
64     }
65 }

 

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。react