关于前端:前端常考react相关面试题一

对有状态组件和无状态组件的了解及应用场景

（1）有状态组件

特点：

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

应用场景：

• 须要应用到状态的。
• 须要应用状态操作组件的（无状态组件的也能够实现新版本 react hooks 也可实现）

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

（2）无状态组件 特点：

• 不依赖本身的状态 state
• 能够是类组件或者函数组件。
• 能够完全避免应用 this 关键字。（因为应用的是箭头函数事件无需绑定）
• 有更高的性能。当不须要应用生命周期钩子时，应该首先应用无状态函数组件
• 组件外部不保护 state，只依据内部组件传入的 props 进行渲染的组件，当 props 扭转时，组件从新渲染。

应用场景：

• 组件不须要治理 state，纯展现

长处：

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

毛病：

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

总结： 组件外部状态且与内部无关的组件，能够思考用状态组件，这样状态树就不会过于简单，易于了解和治理。当一个组件不须要治理本身状态时，也就是无状态组件，应该优先设计为函数组件。比方自定义的 <Button/>、<Input /> 等组件。

形容事件在 React 中的解决形式。

为了解决跨浏览器兼容性问题，React 中的事件处理程序将传递 SyntheticEvent 的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent 与你习惯的原生事件具备雷同的接口，它们在所有浏览器中都兼容。
React 实际上并没有将事件附加到子节点自身。而是通过事件委托模式，应用单个事件监听器监听顶层的所有事件。这对于性能是有益处的。这也意味着在更新 DOM 时，React 不须要放心跟踪事件监听器。

如何在 ReactJS 的 Props 上利用验证？

当应用程序在开发模式下运行时，React 将主动查看咱们在组件上设置的所有 props，以确保它们具备正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成正告音讯，而在生产模式中因为性能影响而禁用它。强制的 props 用 isRequired定义的。
上面是一组预约义的 prop 类型:

• React.PropTypes.string
• React.PropTypes.number
• React.PropTypes.func
• React.PropTypes.node

• React.PropTypes.bool
  例如，咱们为用户组件定义了如下的propTypes

  import PropTypes from "prop-types";
  class User extends React.Component {render() {
      return (
        <>
          <h1>Welcome, {this.props.name}</h1>
          <h2>Age, {this.props.age}</h2>
        </>
      );
    }
  }
  
  User.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  };

在 React 中，refs 的作用是什么

Refs 能够用于获取一个 DOM 节点或者 React 组件的援用。何时应用 refs 的好的示例有治理焦点 / 文本抉择，触发命令动画，或者和第三方 DOM 库集成。你应该防止应用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所举荐的。

react 中的 Portal 是什么？

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的形式。
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。
第二个参数（container）则是一个 DOM 元素。

ReactDOM.createPortal(child, container)

怎么用 React.createElement 重写上面的代码

Question：

const element = (
  <h1 className="greeting">
    Hello, rdhub.cn!
  </h1>
);

Answer：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, rdhub.cn!'
);

何为 Children

在 JSX 表达式中，一个开始标签 (比方<a>) 和一个敞开标签 (比方</a>) 之间的内容会作为一个非凡的属性 props.children 被主动传递给蕴含着它的组件。

这个属性有许多可用的办法，包含 React.Children.map，React.Children.forEach，React.Children.count，React.Children.only，React.Children.toArray。

何为纯函数(pure function)

一个纯函数是一个不依赖于且不扭转其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的后果。

应用箭头函数 (arrow functions) 的长处是什么

• 作用域平安：在箭头函数之前，每一个新创建的函数都有定义本身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this 是未定义的；如果函数被称为“对象办法”，则为根底对象等)，但箭头函数不会，它会应用关闭执行上下文的 this 值。
• 简略：箭头函数易于浏览和书写
• 清晰：当一切都是一个箭头函数，任何惯例函数都能够立刻用于定义作用域。开发者总是能够查找 next-higher 函数语句，以查看 this 的值

(组件的)状态 (state) 和属性 (props) 之间有何不同

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着工夫的推移而产生渐变，但少数时候是作为用户事件行为的后果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能扭转本身的 props，然而能够把其子组件的 props 放在一起(对立治理)。Props 也不仅仅是数据 – 回调函数也能够通过 props 传递。

什么起因会促使你脱离 create-react-app 的依赖

当你想去配置 webpack 或 babel presets。

指出 (组件) 生命周期办法的不同

• componentWillMount — 多用于根组件中的应用程序配置
• componentDidMount — 在这能够实现所有没有 DOM 就不能做的所有配置，并开始获取所有你须要的数据；如果须要设置事件监听，也能够在这实现
• componentWillReceiveProps — 这个周期函数作用于特定的 prop 扭转导致的 state 转换
• shouldComponentUpdate — 如果你放心组件适度渲染，shouldComponentUpdate 是一个改善性能的中央，因为如果组件接管了新的 prop，它能够阻止 (组件) 从新渲染。shouldComponentUpdate 应该返回一个布尔值来决定组件是否要从新渲染
• componentWillUpdate — 很少应用。它能够用于代替组件的 componentWillReceiveProps 和 shouldComponentUpdate(但不能拜访之前的 props)
• componentDidUpdate — 罕用于更新 DOM，响应 prop 或 state 的扭转
• componentWillUnmount — 在这你能够勾销网络申请，或者移除所有与组件相干的事件监听器

什么是 React 的 refs？为什么它们很重要

refs 容许你间接拜访 DOM 元素或组件实例。为了应用它们，能够向组件增加个 ref 属性。
如果该属性的值是一个回调函数，它将承受底层的 DOM 元素或组件的已挂载实例作为其第一个参数。能够在组件中存储它。

export class App extends Component {showResult() {console.log(this.input.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.showResult.bind(this)}> 展现后果 </button>
      </div>
    );
  }
}

如果该属性值是一个字符串，React 将会在组件实例化对象的 refs 属性中，存储一个同名属性，该属性是对这个 DOM 元素的援用。能够通过原生的 DOM API 操作它。

export class App extends Component {showResult() {console.log(this.refs.username.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref="username" />
        <button onClick={this.showResu1t.bind(this)}> 展现后果 </button>
      </div>
    );
  }
}

setState 办法的第二个参数有什么用？应用它的目标是什么？

它是一个回调函数，当 setState 办法执行完结并从新渲染该组件时调用它。在工作中，更好的形式是应用 React 组件生命周期之——“存在期”的生命周期办法，而不是依赖这个回调函数。

export class App extends Component {constructor(props) {super(props);
    this.state = {username: "雨夜清荷",};
  }
  render() {return <div> {this.state.username}</div>;
  }
  componentDidMount() {
    this.setstate(
      {username: "有课前端网",},
      () => console.log("re-rendered success.")
    );
  }
}

createElement 和 cloneElement 有什么区别？

createElement 是 JSX 被转载失去的，在 React 中用来创立 React 元素（即虚构 DOM）的内容。cloneElement 用于复制元素并传递新的 props。

为何 React 事件要本人绑定 this

在 React 源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback 办法。

function invokeGuardedCallback(name, func, a) {
  try {func(a);
  } catch (x) {if (caughtError === null) {caughtError = x;}
  }
}

事件处理函数是间接调用的，并没有指定调用的组件，所以不进行手动绑定的状况下间接获取到的 this 是不精确的，所以咱们须要手动将以后组件绑定到 this 上

React 的工作原理

React 会创立一个虚构 DOM(virtual DOM)。当一个组件中的状态扭转时，React 首先会通过 “diffing” 算法来标记虚构 DOM 中的扭转，第二步是调节(reconciliation)，会用 diff 的后果来更新 DOM。

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

• 类组件不仅容许你应用更多额定的性能，如组件本身的状态和生命周期钩子，也能使组件间接拜访 store 并维持状态
• 当组件仅是接管 props，并将组件本身渲染到页面时，该组件就是一个 ‘ 无状态组件 (stateless component)’，能够应用一个纯函数来创立这样的组件。这种组件也被称为哑组件(dumb components) 或展现组件