字节前端二面react面试题（边面边更）_react字节面试题

diff 算法?

• 把树形结构按照层级分解，只比较同级元素
• 给列表结构的每个单元添加唯一的 key 属性，方便比较
• React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)
• 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个 事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
• 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

在React中组件的props改变时更新组件的有哪些方法？

在一个组件传入的props更新时重新渲染该组件常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。

（1）componentWillReceiveProps（已废弃）

在react的componentWillReceiveProps(nextProps)生命周期中，可以在子组件的render函数执行前，通过this.props获取旧的属性，通过nextProps获取新的props，对比两次props是否相同，从而更新子组件自己的state。

这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

（2）getDerivedStateFromProps（16.3引入）

这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在需要使用componentWillReceiveProps时，就可以考虑使用getDerivedStateFromProps来进行替代。

两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。

需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾：

static getDerivedStateFromProps(nextProps, prevState) {
   
    const {
   type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
   
        return {
   
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

为什么使用jsx的组件中没有看到使用react却需要引入react？

本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。在React 17之前，如果使用了JSX，其实就是在使用React， babel 会把组件转换为 CreateElement 形式。在React 17之后，就不再需要引入，因为 babel 已经可以帮我们自动引入react。

父子组件的通信方式？

父组件向子组件通信：父组件通过 props 向子组件传递需要的信息。

// 子组件: Child
const Child = props =>{
   
  return <p>{
   props.name}</p>
}
// 父组件 Parent
const Parent = ()=>{
   
    return <Child name="react"></Child>
}

1
2
3
4
5
6
7
8
9
10
11
12

子组件向父组件通信：: props+回调的方式。

// 子组件: Child
const Child = props =>{
   
  const cb = msg =>{
   
      return ()=>{
   
          props.callback(msg)
      }
  }
  return (
      <button onClick={
   cb("你好!")}>你好</button>
  )
}
// 父组件 Parent
class Parent extends Component {
   
    callback(msg){
   
        console.log(msg)
    }
    render(){
   
        return <Child callback={
   this.callback.bind(this)}></Child>    
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

React组件的构造函数有什么作用？它是必须的吗？

构造函数主要用于两个目的：

• 通过将对象分配给this.state来初始化本地状态
• 将事件处理程序方法绑定到实例上

所以，当在React class中需要设置state的初始值或者绑定事件时，需要加上构造函数，官方Demo：

class LikeButton extends React.Component {
   
  constructor() {
   
    super();
    this.state = {
   
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
   
    this.setState({
   liked: !this
1
2
3
4
5
6
7
8
9
10
11
12
13
14