react面试题

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

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

2. React项目用过什么脚手架

create-react-app等。
原理回单用webpack loader Plugin插件可以实现。

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

如果您的组件具有状态（state）或生命周期方法，请使用Class组件。否则，使用功能组件。

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

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

render(){
  return(
    <ul>
      {this.state.todoItems.map(({item,key})=>{
        return <li key={key}>{item}</li>
      })}
    </ul>)
}

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

5.React优势

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

6.react diff 原理

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

7.react生命周期函数

初始化阶段
getDefaultProps 获取实力的默认属性
getInitialState 获取每个实例的初始化状态
componentWillMount 组件即将被装载 渲染到页面上
render 组件在这里生成虚拟的dom节点
componentDidMount 组件真正在被装载之后
运行中状态
componentWillReceiveProps 组件将要接收到属性的时候调用
shouldComponentUpdate 组件接收到新属性或者新状态的时候（可以返回false 接收数据后不更新 阻止render调用 后面的函数不会被继续执行了）
componentWillUpdate 组件即将更新不能修改属性和状态
render 组件重新描绘
componentDidUpdate 组件已经更新
销毁阶段
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 (
      ‹form onSubmit={this.handleSubmit}›
        ‹input type='text' ref={input =› (this.input = input)} /›
        ‹button type='submit'›Submit‹/button›
      ‹/form›
    );
  }
}

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。

另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：

function CustomForm({ handleSubmit }) {
  let inputElement;
  return (
    ‹form onSubmit={() =› handleSubmit(inputElement.value)}›
      ‹input type='text' ref={input =› (inputElement = input)} /›
      ‹button type='submit'›Submit‹/button›
    ‹/form›
  );
}

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.在 React 当中 Element 和 Component 有何区别？

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

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

State 是一种数据结构，用于组件挂载时所需数据的默认值。

State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。

组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

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

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

20.createElement 和 cloneElement 有什么区别？

<p>传入的第一个参数不同</p>
<p>
 <strong>React.createElement()</strong>:JSX 语法就是用  React.createElement()来构建 React 元素的。
</p>
它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。
<pre>
React.createElement(type, [props], [...children]);
</pre>
p>
    React.cloneElement()与 React.createElement()相似，不同的是它传入的  第一个参数是一个 <strong>React</strong> 元素，而不是标签名或组件。新添加    的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保   留原始元素的键和引用。
</p>
<pre>
     React.cloneElement(element, [props], [...children]);
</pre>