react面试题

1.当你调用 setState 的时候,发生了什么事?

将传递给 setState 的对象合并到组件的当前状态,
这将启动一个和解的过程,构建一个新的 react 元素树,
与上一个元素树进行对比(diff),从而进行最小化的重渲染。

2. .React 项目用过什么脚手架(开放性题目)

答:creat-react-app Yeoman 等
解析:原理回答用webpack loader Plugin插件可以实现

3.什么时候用类组件Class Component,或函数组件Function

答:如果您的组件具有状态(state)或生命周期方法,请使用Class组件。否则,使用功能组件;

4.React 中 keys 的作用是什么?

答:Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

render () {
  return (
    
    {this.state.todoItems.map(({item, key}) =>{ return
  • {item}
  • })}
) }

在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React 还需要借助 Key 值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。

5.React 优势

答:

  • 1、React 速度很快:它并不直接对 DOM 进行操作,引入了一个叫做虚
    DOM 的概念,安插在 javascript 逻辑和实际的 DOM 之间,性能好。
  • 2、跨浏览器兼容:虚拟 DOM 帮助我们解决了跨浏览器问题,它为我们
    提供了标准化的 API,甚至在 IE8 中都是没问题的。
  • 3、一切都是 component:代码更加模块化,重用代码更容易,可维护性高。
  • 4、单向数据流:Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构, 它随着 React 视图库的开发而被 Facebook 概念化。
  • 5、同构、纯粹的 javascript:因为搜索引擎的爬虫程序依赖的是服务端响
    应而不 是 JavaScript 的执行,预渲染你的应用有助于搜索引擎优化。
  • 6、兼容性好:比如使用 RequireJS 来加载和打包,而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

6.react diff 原理(常考)

答:把树形结构按照层级分解,只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性,方便比较。

React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.

到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

7.react 生命周期函数

答:
1.初始化阶段:

  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每个实例的初始化状态
  • componentWillMount:组件即将被装载、渲染到页面上
  • render:组件在这里生成虚拟的 DOM 节点
  • componentDidMount:组件真正在被装载之后
  1. 运行中状态:
  • componentWillReceiveProps:组件将要接收到属性的时候调用
  • shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
  • componentWillUpdate:组件即将更新不能修改属性和状态
  • render:组件重新描绘
  • componentDidUpdate:组件已经更新
    3.销毁阶段:
  • componentWillUnmount:组件即将销毁

8. shouldComponentUpdate 是做什么的?

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

9.为什么虚拟dom会提高性能?

答:虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能。

用javascript对象结构表示Dom树的结构:然后用这个树构建一个真正的Dom树,插到文档当中当状态变更的时候,重新构造一颗新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的Dom树上,视图就更新了。

10.React 中 refs 的作用是什么?

答:Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

class CustomForm extends Component {
  handleSubmit = () => {
    console.log('Input Value: ', this.input.value);
  };
  render() {
    return (
      
(this.input = input)} />

上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

function CustomForm({ handleSubmit }) {
  let inputElement;
  return (
    
handleSubmit(inputElement.value)}> (inputElement = input)} />

11.setState 和 replaceState 的区别

答:setState 是修改其中的部分状态,相当于 Object.assign,只是覆盖,
不会减少原来的状态; replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了。

12.React 中有三种构建组件的方式

答:React.createClass()、ES6 class 和无状态函数。

13.描述事件在 React 中的处理方式

答:为了解决跨浏览器兼容性问题,您的 React 中的事件处理程序将传递 SyntheticEvent 的实例,它是 React 的浏览器本机事件的跨浏览器包装器。
这些 SyntheticEvent 与您习惯的原生事件具有相同的接口,除了它们在所有浏览器中都兼容。
有趣的是,React 实际上并没有将事件附加到子节点本身。
React 将使用单个事件监听器监听顶层的所有事件。
这对于性能是有好处的,这也意味着在更新 DOM 时,React 不需要担心跟踪事件监听器。

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

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

15.调用 super(props) 的目的是什么

答:在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。
传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

16.除了在构造函数中绑定 this,还有其它方式吗

答:可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。
在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。

17.为什么setState 的参数是一个 callback 而不是一个对象

答:因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。

18.在 React 当中 Element 和 Component 有何区别?

答:React Element 是描述屏幕上所见内容的数据结构,是对于 UI 的对象表述。
典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化createElement 的调用组合。
React Component 是一个函数或一个类,可以接收参数输入,并且返回某个 React Element

19.状态(state)和属性(props)之间有何区别

答:State 是一种数据结构,用于组件挂载时所需数据的默认值。
State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。
组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据,回调函数也可以通过 props 传递。

20.createElement 和 cloneElement 有什么区别?

答:

  • 传入的第一个参数不同

  • React.createElement():JSX 语法就是用React.createElement()来构建 React 元素的。

  • 它接受三个参数,第一个参数可以是一个标签名。如 div、span,或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数,皆作为组件的子组件。
    React.createElement(type, [props], [...children]);

  • React.cloneElement()与 React.createElement()相似,不同的是它传入的 第一个参数是一个React元素,而不是标签名或组件。新添加 的属性会并入原有的属性,传入到返回的新元素中,而旧的子元素将被替换。将保留原始元素的键和引用。
    React.cloneElement(element, [props], [...children]);

你可能感兴趣的:(react面试题)