打卡学习-React(一)

213 阅读4分钟

菜鸟打卡

1.React 中有几种创建组件的方式?

通过函数的方式创建组件, 此种方式创建的组件为无状态组件(不常用);React.createClass();

通过 class 类的方式创建组件(须继承 React.Component), 实际开发中 使用此种方式.

2.React 中的组件按照职责不同, 可以分为几种类型?

根据组件的职责通常把组件分为 UI 组件和容器组件;UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑; 两者通过 React-Redux 提供 connect 方法联系起来.

3.类组件(Class component)和函数式组件(Functional component)之间有何不同?

类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态;

当组件仅是接收props,并将组件自身渲染到页面时,该组件就是一个 无状态组件(stateless component)',可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件.

3.说说 react 的生命周期函数?

初始化阶段:

  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每个实例的初始化状态
  • componentWillMount:组件即将被装载、渲染到页面上
  • render:组件在这里生成虚拟的 DOM 节点
  • componentDidMount:组件真正在被装载之后

运行中状态:

  • componentWillReceiveProps:组件将要接收到属性的时候调用

  • shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)

  • componentWillUpdate:组件即将更新不能修改属性和状态

  • render:组件重新描绘

  • componentDidUpdate:组件已经更新

销毁阶段:

  • componentWillUnmount:组件即将销毁

4.react 性能优化可以使用哪个生命周期函数?

shouldComponentUpdate 这个方法用来判断是否需要调用 render方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。

5.React 中状态 state 和属性 props 有什么不同?

state 是组件的私有数据, 可读可写, props 是只读属性, 一般来自外部(比如父组件)

6.React 中调用 setState 后发生了什么?

在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

7.应该在 React 组件的何处发起 Ajax 请求?

React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

8.React 事件机制跟原生事件有什么区别?

React 的事件使用驼峰命名, 跟原生的全部小写做区分.不能通过return false 来阻止默认行为, 必须明确调用 preventDefault 去阻止浏览器的默认响应.

9.React 事件中为什么要绑定 this 或者要用箭头函数?

事实上, 这并不算是 react 的问题, 而是 this 的问题. 但是也是 react 中 经常 出现 的问 题 . 因 此也 讲一 下Click Me这里的 this 是当事件被触发时进行绑定的. this 的值会回退到默认绑定,即值为 undefined,这是因为类声明和原型方法是以严格模式运行。我们可以使用 bind 绑定到组件实例上. 而不用担心它的上下文.因为箭头函数中的 this 指向的是定义时的 this,而不是执行时的 this. 所以箭头函数同样也可以解决.

10.谈谈 react 中的事件机制

在组件挂载的阶段, 根据组件生命的 react 事件, 给 document 添加事件addEventListener, 并添加统一的事件处理函数 dispatchEvent. 将所有的事件和事件类型以及 react 组件进行关联, 将这个关系保存在一个 map 里. 当事件触发的时候, 首先生成合成事件, 根据组81件 id 和事件类型找到对应的事件函数, 模拟捕获流程, 然后依次触发对应的函数.