React 面试细节

React

1、虚拟 DOM && 真实 DOM

• 本质是 Object 类型的对象（一般对象）。
• 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
• 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

2、创建虚拟 DOM 的两种方式：JS 和 JSX

• 使用 JS 创建虚拟 DOM 比 JSX 繁琐
• JSX 可以让程序员更加简单地创建虚拟 DOM，相当于语法糖
• 最终 babel 会把 JSX 语法转换为 JS

3、 函数式组件 渲染过程

• React 解析标签，寻找对应组件
• 发现组件是函数式组件，则调用函数，将返回的虚拟 DOM 转换为真实 DOM ，并渲染到页面中

4、类式组件 渲染过程

• React 解析组件标签，寻找组件
• 发现是类式组件，则 new 该类的实例对象，通过实例调用原型上的 render 方法
• 将 render 返回的虚拟 DOM 转为真实 DOM ，渲染到页面上

5、 说说state是什么 ， 他有什么用，用它要注意些什么

state 是组件实例对象最重要的属性，值为对象。又称为状态机，通过更新组件的 state 来更新对应的页面显示。

• 初始化 state
• React 中事件绑定
• this 指向问题
• setState 修改 state 状态 两种方式
  • 对象式：setState({xxx: yyy}, [callback])
  • 函数式：setState((state,props)=> {}, [callback])
• constructor 、render 、自定义方法的调用次数

6、 说说什么是props 及特点

每个组件对象都有 props 属性，组件标签的属性都保存在 props 中。props 是只读的，不能修改。

• 怎么传递和接收props ==> 通过 标签属性传到数据到子组件 子组件通过 props 来接收父组件传递的数据。
• 如何显示props 单独引入PropTypes 库

7、react组件中 this 一般都用在哪些地方。

8、什么是受控组件和非受控组件，说说他们的区别和特点。

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

• 受控组件
  • 表单组件的状态/数据只由state 维护 修改只能通过setState()来更新,
  • 表单数据是由 React 组件来管理
• 非受控组件
  • 使用ref来从 DOM 节点中获取表单数据。
  • 表单数据将交由 DOM 节点来处理

9、高阶函数

参数为函数或者返回一个函数的函数，如 Promise、setTimeout、Array.map()

10、函数柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

11、生命周期

12、组件优化

1、只要调用 setState() ，即使没有修改状态，组件也会重新 render() , 2、只要父组件重新渲染，即使子组件没有使用父组件的状态，也会重新 render()

• 原因：shouldComponentUpdate() 钩子默认总是返回 true
• 改进：只有组件的 state 或 props 的数据发生改变时才重新渲染
• 方式：
  • 手动重写 shouldComponentUpdate(nextProps, nextState) 的逻辑，只有数据发生改变才返回 true
  • 使用 PureComponent ，它重写了 shouldComponentUpdate() ， 只有 state 或 props 数据有变化才返回 true

1、它只是进行 state 和 props 数据的浅比较, 如果只是数据对象内部数据变了, 返回 false。即对于引用数据类型，比较的是地址引用 2、不要直接修改 state 数据, 而是要产生新数据

13、React如何实现插槽技术，有几种方式

• 使用 children props：通过组件标签体传入结构

const Demo = () => (<div>{this.props.children}</div>)

• 使用 render props：通过组件标签属性传入结构，可携带数据

import React, { Component } from 'react'

const Parent = () => {
  return (<Child render={ (name) => <ThirdChild name={name} /> } />)
}

const Child = () => {
  return (<ThirdChild > { this.props.render(name) }</ThirdChild>)
}

14 组件间通信

• 父子组件：props
• 兄弟组件 消息订阅发布：pubs-sub
• 祖孙组件(跨级组件) Redux、dva context