02|设计高质量的React组件

2019-12-10  本文已影响0人  井润

我们所需要了解的三个原则:

01|易于维护组件的设计要素

02|React中的数据(props)

分为props(Property)和state

  1. 关于Props:

React组件的Props很像是HTML中的属性,其实不是的,props支持多种形式的类型 除了字符串,props可以是任何一种JS语言支持的数据类型! 除了字符串的时候,需要使用花括号{}把props的值包裹住!

父组件提供给子组件一个 回调函数 子组件恰当时机调用回调函数,传入对应的值,就可以反过来把信息传递给外部世界!

  1. 读取props的值:
  1. 使用propTypes

对应的借助propTypes帮助我们做组件规范和约束

Tips:

02|React中的数据(state)

state在React中是一个JS对象!

  1. 读取和设置state
    1. this[state] 或者说使用 this.state使用state
    2. 设置state需要使用 setState(); 参数是对象或者回调函数!

porps和state比对:

03|组件的生命周期

  1. 三个阶段:
  1. 成员函数:
React生命钩子函数.jpg

其实该图就把对应的一些阶段阐述的很明白了!

API参考指南:about React Component API

  1. constructor
    1. 初始化state (构造函数是初始化state最理想的方式)
    2. 绑定成员函数的this环境! (成员函数在执行时候的this并不是和类实例自动绑定的! 在构造函数中this既是当前组件的实例!)
this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
//以下的代码也能够实现同样的功能! ::称之为bind操作符!(来自babel)
this.foo = ::this.foo //===> this.foo = this.foo.bind(this);

  1. React.createClass(ES6定义的组件组件之外的另一种方法 被官方逐渐废弃)

    1. getInitialState 返回值用来初始化组件的this.state
    2. getDefaultProps 返回值作为props的初始值!

  1. render

    1. render函数并不做实际的渲染动作,返回JSX的描述,最终由React操作渲染过程
    2. 不渲染内容的情况下 可以返回 false或者null 不会渲染任何DOM元素!
    3. 作为纯函数单独存在!

对应的componentWillMount(组件更新前调用)和componentDidMount(所有的组件更新完毕之后调用!)

为什么是这样的呢?

render函数并不是渲染或者装载内容,只是JSX表示的对象,之后由React负责渲染,React把所有的组件返回的结果综合起来,才能知道如何产生DOM的修改! 等对应的组件render之后,才可能完成装载,之后才会调用各个组件的componentDidMount函数作为装载函数的扫尾工作!

其实很好理解,Mount也就是所谓的挂载只能够挂载到DOM树上面,服务器端没有对应的DOM! 服务器端渲染并不会产生DOM树,通过React组件产生的只是一个纯粹的字符串!

有什么意义?

  1. 我们更好地理解render和render前后的流程,便于将对应的场景应该使用到合适的生命周期函数中!
  2. 便于将 第三方库与React更好的结合使用!

更新阶段

  1. componentWillReceiveProps(nextProps) 父组件的render函数被调用render函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的props有没有改变,都会触发子组件的 componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate
import React,{Component} from "react";
class Example extends Component{
    render(){
        return (
            <button onClick={()=>this.forceUpdate()}>
                Click me to repaint!
            </button>
        );
    }
}
export default Example;

使用forceUpdate进行重新渲染,绘制! 但是使用箭头函数的方式并不推荐!

import React,{Component} from "react";
class ControlPanel extends Component{
    componentWillReceiveProps(nextProps){
        console.log('enter componentWillReceiveProps'+this.props.caption);
    }
    render(){
        return (
            <div>
                <button onClick={()=>this.forceUpdate()}>
                    Click me to repaint!
                </button>
            </div>
        );
    }
}
export default ControlPanel;

对应的将要过期的方法:

  1. UNSAFE_componentWillMount()
  2. UNSAFE_componentWillUpdate()
  3. UNSAFE_componentWillReceiveProps()

合理使用shouldComponentUpdate帮助你更好的优化React的性能!

对应的componentWillUpdate和componentDidUpdate把render夹在中间! 并且都支持 浏览器端和服务器端

卸载过程:

04|组件向外传递数据

  1. React组件和porp的局限(state)
    1. 对应上面的例子出现了一个很大的问题: 每次子组件的状态在维护的同时,父组件对应的也有一个状态同时维护饿了子组件的状态,说白了就是状态的重复!
    2. 对应的问题就是,状态的一致性如何保证!
    3. 解决方法:
      1. 以一个组件的状态为基准!
      2. 将对应的状态抽离出来,抽离到React之外的一个地方! 作为全局状态 各个组件保持与全局状态的一致就比较容易了!

全局状态就是唯一的可靠数据源! (Flux架构设计的概念)

  1. React组件和prop的局限(prop)
上一篇 下一篇

猜你喜欢

热点阅读