react的面试题

参考链接:https://www.jianshu.com/p/e9521f78d51e
1.react性能优化是哪个周期函数?
shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法,可以极大的提高性能。

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

3.reactJS的props.children.map函数来遍历会收到异常提示,为什么?应该如何遍历?
this.props.children 的值有三种可能:
1.当前组件没有子节点,它就是 undefined;
2.有一个子节点,数据类型是 object ;
3.有多个子节点,数据类型就是 array 。
系统提供React.Children.map()方法安全的遍历子节点对象

4.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map?
React.Children.map(props.children, () => ) instead of props.children.map(() => )
props.children并不一定是数组类型,譬如下面这个元素:

Welcome.

如果我们使用props.children.map函数来遍历时会受到异常提示,因为在这种情况下props.children是对象(object)而不是数组(array)。React 当且仅当超过一个子元素的情况下会将props.children设置为数组,就像下面这个代码片:

Welcome.

props.children will now be an array

这也就是我们优先选择使用React.Children.map函数的原因,其已经将props.children不同类型的情况考虑在内了。

在这里插入图片描述

参考:http://web.jobbole.com/95480/
1.应该在 React 组件的何处发起 Ajax 请求

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

2.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])

参考:https://github.com/Advanced-Frontend/Daily-Interview-Question/blob/master/datum/summary.md
1.[‘1’, ‘2’, ‘3’].map(parseInt) 解析
真正的答案是[1, NaN, NaN]。

  • 而parseInt则是用来解析字符串的,使字符串成为指定基数的整数。
    parseInt(string, radix)
    接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。
    在这里插入图片描述

    扫描二维码关注公众号,回复: 5354860 查看本文章
  • 首先让我们回顾一下,map函数的第一个参数callback:

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。

['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]

猜你喜欢

转载自blog.csdn.net/qq_36934775/article/details/87861514