zoukankan      html  css  js  c++  java
  • 前端基础知识学习第十二节(React篇)

    1.

      React中高阶组件(HOC)和高阶函数是什么?

      答案:
      React中的高阶组件本质上是一个函数,只是这种组件(函数)接收一个组件参数,返回一个新的组件。比如说redux中的connect方法,把redux的state和action创建
      函数,通过props注入给了component,你在目标组件component里可以直接用this.props去调用redux state和action创建函数了
      ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);
      相当于这样
      // connect是一个返回函数的函数(就是个高阶函数)
      const enhance = connect(mapStateToProps, mapDispatchToProps);
      // 返回的函数就是一个高阶组件,该高阶组件返回一个与Redux Store关联起来的新组件
      const ConnectedComment = enhance(Component);
      高阶函数:接收的参数是函数或者返回值是函数,如数组遍历相关的(map,reduce),定时器,Promise,高阶组件也是高阶函数,高阶函数的作用就是实现一个
      更加强大动态的功能
      参考:https://www.cnblogs.com/gwf93/p/10295125.html
         https://blog.csdn.net/IT_10/article/details/100148201

    2.

      React有几种定义组件的方式,分别是什么?

      答案:
      React有3中定义组件的方式,分别是
      1)函数式定义 - 无状态组件
      无状态组件是为了纯展示,只负责根据传入的props来展示,不涉及对state的操作。无状态函数式组件形式上表现为只带一个render方法的组件类,通过函数声明
      或者ES6箭头函数来创建,具体创建形式:
      function HelloComponent(props, / * context * /) {
        return <div>Hello {props.name}</div>
      }
      ReactDOM.render(<HelloComponent name="Herly" />, mountNode);
      无状态组件具有以下几个特点:
      组件不会被实例化,整体渲染性能得到提升
      组件不能访问this对象
      组件无法访问生命周期的方法
      无状态组件只能访问输入的props,同样的props得到同样的渲染结果

      2)ES5语法 - React.createClass定义的组件
      React.createClass是React刚开始推荐的定义组件方式,与无状态组件相比,这种方式创建的是有状态的组件,这些组件是要被实例化的,并且可以访问组件的
      生命周期方法,每一个成员函数的this都由React自动绑定,函数中的this被正确设置,可以使用Mixins

      3)ES6语法 - extend React.component定义的组件
      React.component方式创建组件是目前React极为推荐的创建有状态组件方式,以后会统一为这种方式。React.component形式非常适合高阶组件
      (Higher Order Components--HOC),他以更直观的形式展示了比mixins更强大的功能,并且HOC是更纯净的JavaScript,不用担心他们被废弃

      参考:https://www.cnblogs.com/soyxiaobi/p/9573767.html

    3.

      React的setState内部实现原理?

      答案:
      1)setState首先会对传入的对象进行一个合并(浅拷贝)
      2)setState对数据的更新是异步的
      3)通过this.state更改不会触发render的重新渲染
      4)在React中,如果是由React引发的事件处理(比如通过onClick),调用setState不会同步更新this.state,除此之外的setState调用会同步更新this.state。
      这里的除此之外指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。
      原因:在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates
      默认是false,也就表示setState会同步更新this.state,但是有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,
      而当React在调用事务处理函数之前就会调用这个batchedUpdates函数,造成的结果就是由React控制的事件处理过程setState不会同步更新this.state。
      对于异步渲染,我们应在getSnapshotBeforeUpdate中读取state、prop,而不是componentWillUpdate,调用forceUpdate强制render时,会导致组件跳过
      shouldComponentUpdate方法,直接调用render
      参考:https://github.com/sisterAn/blog/issues/26

    4.

      React的性能优化?

  • 相关阅读:
    [国家集训队]数颜色 / 维护队列
    [SP3267]DQUERY
    扩展欧几里得算法详解(exgcd)
    [CTSC2018]混合果汁
    极角排序那些事
    向量的点乘与叉乘学习笔记
    [APIO2014]序列分割
    CF1148D-Dirty Deeds Done Dirt Cheap
    CF176E Archaeology(set用法提示)
    【网络流24题】最长不下降子序列问题
  • 原文地址:https://www.cnblogs.com/typeof/p/12310159.html
Copyright © 2011-2022 走看看