react基础

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

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

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

creat-react-app
Yeoman

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

如果您的组件具有状态(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 优势

• 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生命周期函数

• 初始化阶段：

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树插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异并把所记录的差异应用到真正的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.为什么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]);