React知识点汇总

核心：组件系统，all in js,自动更新dom,三个阶段，十一个钩子函数，更新状态，react中的事件，可控和不可控组件

1.React概述

•    React是facebook于2013年6月推出的一个库
•   其要解决的问题是构建数据不断变化的大型应用
•   特点是简单和声明式（自动dom操作）
•   核心是组件，使用组件提高了代码的复用率，降低测试的难度和代码的复杂度
•   发展历程2013.6发布，2013.9月上涨,2015.3月react native发布

2.React 开发环境

不需要特殊的开发环境，使用常见IDE并安装相应的插件即可，React兼容IE8及以上，其他主流的浏览器也兼容，兼容性较好。

3.JSX语法的介绍

简单来说就是all in js,将html，css全部写到js文件中,需要使用jsxTransfer.js进行代码的转换

4.组件生命周期

组件本质上是状态机，输入确定，输出一定确定

分为三个部分：初始化阶段——运行中阶段——销毁阶段5

初始化阶段的钩子函数：（5个钩子函数，按照顺序排列）

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

运行中阶段：（5个钩子函数，按照顺序排列）

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

销毁阶段：（1个钩子函数）

• componentWillUnmount

5.React属性和状态详解

• 状态的含义和用法
• 状态的用法

getInitalState：初始化每个实例

setState:更新组件状态（就是更新组件数据，十分重要的方法）

6.React中事件的用法

React中不同事件对象：

通用、剪切、键盘、焦点、鼠标、触摸、UI元素、滚动八种。这些都是对原生js的封装而已，原生js中有哪些？和这些的区别是什么?

 

7.React组件的协同使用

• 什么是组件的协同使用?

组件协同本质上是对组件的一种组织管理方式，目的是：

1）逻辑清晰

2）代码模块化

3）封装细节

4）代码可复用

• 组件协同的两种主要方式

1）嵌套：组件嵌套是由多个小组件共同拼凑成一个大的组件完成一个功能，主要体现了模块化和封装思想

2）mixin:组件混入，将多个小组件中共同的部分抽取出来，主要实现的是代码复用的思想

8.React表单详解

自定义表单组件的原因：

• 内因：表单本身具备特殊性，样式统一，信息内聚，行为固定
• 外因：本质上是组件嵌套，组织和管理组件的一种方式

两种组件:

• 可控组件
• 不可控组件

组件可控的好处：符合React的数据流，数据存储在state中，便于使用，便于对数据进行处理。

9.React组件API（主要是以下7个方法）

• 设置状态：setState
• 替换状态：replaceState
• 设置属性：setProps
• 替换属性：replaceProps
• 强制更新：forceUpdate
• 获取DOM节点：findDOMNode
• 判断组件挂载状态：isMounted

10.react 重的state和props之间的区别是？

11.react 的两种组件?container和component，容器组件和展示组件?

• container
• component

12.容器组件的三大组成部分?

• action
• reducer
• store

13.react中的refs属性?

 

16在react16之后中新加的hooks的主要作用是什么？

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

下面介绍 React 默认提供的四个最常用的钩子。

• useState()
• useContext()
• useReducer()
• useEffect()

17.请问react中的fiber算法是什么？具体有什么作用呢？

Reconciliation以fiber tree为蓝本，把每个fiber作为一个工作单元，自顶向下逐节点构造workInProgress  tree（构建中的新fiber tree）。具体过程如下：

1.如果当前节点不需要更新，直接把子节点clone过来，跳到5；要更新的话打个tag

2.更新当前节点状态（props, state, context等）

3.调用shouldComponentUpdate()，false的话，跳到5

4.调用render()获得新的子节点，并为子节点创建fiber（创建过程会尽量复用现有fiber，子节点增删也发生在这里）

5.如果没有产生child fiber，该工作单元结束，把effect list归并到return，并把当前节点的sibling作为下一个工作单元；否则把child作为下一个工作单元

6.如果没有剩余可用时间了，等到下一次主线程空闲时才开始下一个工作单元；否则，立即开始做

7.如果没有下一个工作单元了（回到了workInProgress tree的根节点），第1阶段结束，进入pendingCommit状态

fiber总结：

Fiber架构其实就是React自己内部实现了一套调度系统，通过某些调度策略合理地分配CPU资源，达到快速响应用户，让用户觉得够快，不阻塞用户的交互的目标。这一套调度系统还有一点好处：

给浏览器一点喘息的机会，他会对代码进行编译优化（JIT）及进行热代码优化，或者对reflow进行修正。

 

18.Dva介绍一下?

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

19.解决每个组件都要使用一个div包裹后，最终造成了组件层级过深的问题的方法？fragment的作用是啥？

         使用<></>标签，或者使用<fragment></fragment>标签进行包裹，在react进行jsx语法解析的时候，会自动将其清除。

20.pureCompoent纯组件的使用？

shouldComponentUpdate只检查props.color和state.count的变化。如果这些值没有变化，组件就不会更新。当你的组件变得更加复杂时，你可以使用类似的模式来做一个“浅比较”，用来比较属性和值以判定是否需要更新组件。这种模式十分常见，因此React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent。以下代码可以更简单的实现相同的操作：

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

21.renderProps的使用，当存在自定义的组件需要自己包裹另外一个自定义组件时，会造成包裹的组件无法显示的问题，renderProps就相当于vue中的slot插槽。可以实现这个功能。