React 初级用法

React 前言

  作为一个开发人员，如今我们大多数都会沉迷于项目的业务开发，很少花时间进行技术或问题梳理。以至于我们每次遇到相同的问题或障碍，都会再次陷入。总结和思考应该是我们每一个人所要掌握的软技能。React作为一个主流的JS库，使我们的开发变得更加简单。

React 是什么？

  React是Facebook开发的一款JS库。React便于构建随数据变化的大型应用程序。

React 特点

• 构建、更新 简单
  
  • UI搭建方便简单
  • 自动更新UI界面
• 组件复用强
  
  • 高复用
  • 单元测试

React 原理

• 虚拟DOM
  
  • 通过虚拟DOM来更新真实DOM减少资源浪费,优化性能
  • diff算法
    
    • diff算法作为虚拟DOM的加速器，保障了整个界面渲染的基础和性能
  • 传统diff算法
    
    • 计算一颗树形结构转换为另一颗树形结构所需要的最少步骤（时间复杂度为O(n^3)）
  • ==diff算法(React)==(diff算法)
    
    • UI 中DOM节点跨层级的移动操作特别少，可以忽略不计
    • 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
    • 对于同一层级的一组子节点，它们可以通过唯一id进行区分
• 节点
  
  • 传统DOM树上的节点被称为元素
  • 虚拟DOM树上的节点称为组件(完整的抽象组件)
• 状态state和render生命周期函数
  
  • 状态改变调用render函数更新UI

React 用法

  props是一个从外部传进组件的参数，主要作为父子组件间数据传递，具有只读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。

• props
  
  • 只读性
    
    • props经常被用作渲染组件和初始化状态
  • 默认值
    
    • 设置默认值，并且制定它的类型

  state的主要用于保存、控制以及修改组件的状态，它只能在constructor中初始化this.state={a:1}，属于组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState({a:2})来修改

• state
  
  • 特殊用法
    
    • this.setState({a;2},()=>{//重新渲染时UI时被调用})

  react生命周期是一个比较重要的知识点。

• 生命周期

    /**
    *-------构造器-------
    *1、初始化默认属性
    *2、....
    */
    constructor(props){
        super(props);
    }


     /**
    *-------组件挂载之前-------
    *1、更改属性
    *2、....
    */
    componentWillMount(){

    }

     /**
    *-------组件挂载之后-------
    *1、引用refs
    *2、网络请求
    *3、.......
    */
    componentDidMount(){

    }

    /**
    *-------父组件render时子组件执行-------
    *1、引用refs
    *2、....
    */
    componentWillReceiveProps(nextProps){
        //不管props有没有更新，也不管父子组件之间有没有数据交换,都会被执行
    }

     /**
    *-------组件挂载之后state发生改变-------
    *1、需要重新渲染组件，默认返回true，需要重新render
    *2、....
    */
    shouldComponentUpdate(nextProps, nextState){

    }

     /**
    *-------组件渲染之前-------
    *1、shouldComponentUpdate返回true或者调用forceUpdate之后
    *2、....
    */
    componentWillUpdate(nextProps, nextState){

    }

    /**
    *-------组件渲染-------
    */
    render(){

    }


    /**
    *-------组件渲染之后-------
    */
    componentDidUpdate(){

    }

     /**
    *-------组件卸载之前-------
    *1、取消监听
    *2、释放资源
    *3、......
    */
    componentWillUnmount(){

    }

React 总结

   合理进行React组件封装，生命周期函数componentDidMount、componentWillUnmount、shouldComponentUpdate的使用，巧用props、state进行UI渲染会使得界面开发更加简单方便。