百度前端高频react面试题（持续更新中）

说说你用react有什么坑点？

1. JSX做表达式判断时候，需要强转为boolean类型

如果不使用 !!b 进行强转数据类型，会在页面里面输出 0。

render() {
  const b = 0;
  return <div>
    {
      !!b && <div>这是一段文本</div>
    }
  </div>
}

2. 尽量不要在 componentWillReviceProps 里使用 setState，如果一定要使用，那么需要判断结束条件，不然会出现无限重渲染，导致页面崩溃

3. 给组件添加ref时候，尽量不要使用匿名函数，因为当组件更新的时候，匿名函数会被当做新的prop处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回调参数先执行一次ref这个props，然后在以该组件的实例执行一次ref，所以用匿名函数做ref的时候，有的时候去ref赋值后的属性会取到null

4. 遍历子节点的时候，不要用 index 作为组件的 key 进行传入

React中的props为什么是只读的？

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。

提到函数式编程就要提一个概念：纯函数。它有几个特点：

• 给定相同的输入，总是返回相同的输出。
• 过程没有副作用。
• 不依赖外部状态。

this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用

高阶组件存在的问题

• 静态方法丢失(必须将静态方法做拷贝)
• refs 属性不能透传(如果你向一个由高阶组件创建的组件的元素添加ref引用，那么ref指向的是最外层容器组件实例的，而不是被包裹的WrappedComponent组件。)
• 反向继承不能保证完整的子组件树被解析
  React 组件有两种形式，分别是 class 类型和 function 类型（无状态组件）。

我们知道反向继承的渲染劫持可以控制 WrappedComponent 的渲染过程，也就是说这个过程中我们可以对 elements tree、 state、 props 或 render() 的结果做各种操作。

但是如果渲染 elements tree 中包含了 function 类型的组件的话，这时候就不能操作组件的子组件了。

对有状态组件和无状态组件的理解及使用场景

（1）有状态组件

特点：

• 是类组件
• 有继承
• 可以使用this
• 可以使用react的生命周期
• 使用较多，容易频繁触发生命周期钩子函数，影响性能
• 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state进行渲染。

使用场景：

• 需要使用到状态的。
• 需要使用状态操作组件的（无状态组件的也可以实现新版本react hooks也可实现）

总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。

（2）无状态组件 特点：

• 不依赖自身的状态state
• 可以是类组件或者函数组件。
• 可以完全避免使用 this 关键字。（由于使用的是箭头函数事件无需绑定）
• 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件
• 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。

使用场景：

• 组件不需要管理 state，纯展示

优点：

• 简化代码、专注于 render
• 组件不需要被实例化，无生命周期，提升性能。 输出（渲染）只取决于输入（属性），无副作用
• 视图和数据的解耦分离

缺点：

• 无法使用 ref
• 无生命周期方法
• 无法控制组件的重渲染，因为无法使用shouldComponentUpdate 方法，当组件接受到新的属性时则会重渲染

总结： 组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的 <Button/>、 <Input /> 等组件。

什么是受控组件和非受控组件

• 受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定

class Input extends Component{
   
    constructor(){
   
        super();
        this.state = {
   val:'100'}
    }
    handleChange = (e) =>{
    //e是事件源
        let val = e.target.value;
        this.setState({
   val});
    };
    render(){
   
        return (<div>
            <input type="text" value={
   this.state.val} onChange={
   this.handleChange}/>
            {
   this.state.val}
        </div>)
    }
}

• 非受控也就意味着我可以不需要设置它的state属性，而通过ref来操作真实的DOM

class Sum extends Component{
   
    constructor(){
   
        super();
        this.state =  {
   result:''}
    }
    //通过ref设置的属性 可以通过this.refs获取到对应的dom元素
    handleChange = () =>{
   
        let result = this.refs.a.value + this.b.value;
        this.setState({
   result});
    };
    render(){
   
        return (
            <div onChange={
   this.handleChange}>
                <input type="number" ref="a"/>
                {
   /*x代表的真实的dom,把元素挂载在了当前实例上*/}
                <input type="number" ref={
   (x)=>{
   
                    this.b = x;
                }}/