react 实习小记

1.setState
当调用setState的时候，react做的第一件事就是将传递给setState的对象合并到当前组件的当前状态，根据这个状态更新DOM。而且React将构建一个新的React虚拟DOM树，并且跟旧的DOM树进行比较，React比较过后知道发生的具体变化，就可以使用最小的操作代价更新DOM。

2.元素element和组件component有什么区别？
首先了解一下什么是dom，dom，即document object model(文本对象模型)。整个页面元素统称dom。
dom树。

那么element就是在屏幕上看到的元素，比如一个按钮，一个表格等。
component是一个函数或者一个类，可以接收输入并且返回一个元素。

3.什么时候使用类组件，什么时候使用功能组件？
如果组件具有状态或者生命周期方法，就使用类组件，否则就使用功能组件，一般情况下，使用的都是类组件。

4.关于react中的refs
refs可是使我们直接访问DOM元素或者组件实例，为了使用它们，可以向组件添ref属性。
如果ref的值是一个回调函数，就接收底层的dom元素或者已挂载实例作为其第一个参数，可以在组件中存储它。
如果ref的值是一个字符串，react会在组件实例化对象的refs属性中，存储一个同名属性，该属性是对这个dom元素的引用。

5.react中的key
key可以帮助react跟踪循环创建列表中的虚拟dom元素，了解哪些元素已更改，添加或删除。每个绑定key的虚拟dom元素，在兄弟元素之间都是独一无二的。

6.一个组件接受一个函数作为它的子组件。Icketang组件的子组件是一个函数，而不是一个常用的组件。这意味着在实现 Icketang组件时，需要将props. children作为一个函数来处理。

< Icketang username="雨夜清荷">
{user = > user ？<Info user={user} />：<Loading />}
</Icketang>
import React, { Component } fromr "react"；
 export class Icketang extends Component {
//请实现你的代码
}

render ( ) {
return this.props.children ( this .state.user )
}

7.约束性组件与非约束性组件有什么区别

在react中，组件负责控制和管理自己的状态。
如果将html中的表单元素添加到组件中，当用户与表单发生交互时候，就涉及到表单数据存储问题。根据表单数据的存储位置，将组件分成约束性和非约束性。
约束性组件，表单元素的数据存储在组件内部的状态中，表单呈现什么由组件决定。
非约束性组件，表单元素的数据交由元素自身存储并处理，而不是通过react组件。比如input，通过refs获取。

8.在哪个生命周期中会发出ajax请求，为什么？
Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。挂载时候，渲染完成。而且这个生命周期一定会执行，总不能在销毁时候请求数据毫无意义。

9.shouldComponentUpdate有什么用？
组件状态或者属性数据发生更新的时候，组件会进入存在期（更新），视图会重新渲染。而shouldComponentUpdate可以让我们退出某些组件的更新，因为每次都需要根据新的状态，对比dom树，看哪里需要更新，如果我们知道有些用户界面不会改变，那么就不用去对比弄清楚它是否应该重新渲染，我们可以通过shouldComponentUpdate方法返回去false，让组件保持当前状态不变。

10.如何用react构建生产模式？

通常，使用 Webpack的 DefinePlugin方法将 NODE ENV设置为 production。这将剥离 propType验证和额外的警告。除此之外，还可以减少代码，因为 React使用 Uglify的dead-code来消除开发代码和注释，这将大大减少包占用的空间。

<Parent>
<h1>有课前端网</h1>
<h2>前端技术学习平台</h2>
</Parent>
不建议使用如下方式，在这个案例中会抛出错误。
class Parent extends Component {
 render ( ) {
 return (
<div> { this .props.children.map (obj = > obj ) }</div>
)
} 
}

this.props.children是一个对象，所以不能用map上述方法是错的。下面的方法是正确的。

class Parent extends Component  {
render ( ) {
  return (
<div> { React.Children.map ( this .props.children, obj => obj) }</div>
)
}
}

12.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. ' ) )

13.请说岀 React从 EMAScript5编程规范到 EMAScript6编程规范过程中的几点改变
（1）创建组件的方法不同。

EMAScript5版本中，定义组件用 React.createClass。EMAScript6版本中，定义组件要定义组件类，并继承 Component类。

（2）定义默认属性的方法不同。

EMAScript5版本中，用 getDefaultProps定义默认属性。EMAScript6版本中，为组件定义 defaultProps静态属性，来定义默认属性。

（3）定义初始化状态的方法不同。EMAScript5版本中，用 getInitialState定义初始化状态。EMAScript6版本中，在构造函数中，通过this. state定义初始化状态。

注意：构造函数的第一个参数是属性数据，一定要用 supe继承。

14.react中D算法的原理是什么?
1)节点之间的比较
节点包括两种类型：一种是 React组件，另一种是HTML的DOM。
如果节点类型不同，按以下方式比较。

如果 HTML DOM不同，直接使用新的替换旧的。如果组件类型不同，也直接使用新的替换旧的。

如果 HTML DOM类型相同，按以下方式比较。
在 React里样式并不是一个纯粹的字符串，而是一个对象，这样在样式发生改变时，只需要改变替换变化以后的样式。修改完当前节点之后，递归处理该节点的子节点。
如果组件类型相同，按以下方式比较。

如果组件类型相同，使用 React机制处理。一般使用新的 props替换旧的 props，并在之后调用组件的 componentWillReceiveProps方法，之前组件的 render方法会被调用。
（2）两个列表之间的比较。

一个节点列表中的一个节点发生改变， React无法很妤地处理这个问题。循环新旧两个列表，并找出不同，这是 React唯一的处理方法。

但是，有一个办法可以把这个算法的复杂度降低。那就是在生成一个节点列表时给每个节点上添加一个key。这个key只需要在这一个节点列表中唯一，不需要全局唯一。
（3）取舍

需要注意的是，上面的启发式算法基于两点假设。

类型相近的节点总是生成同样的树，而类型不同的节点也总是生成不同的树

可以为多次 render都表现稳定的节点设置key。

上面的节点之间的比较算法基本上就是基于这两个假设而实现的。要提高 React应用的效率，需要按照这两点假设来开发。

15.传入 setstate函数的第二个参数的作用是什么？

第二个参数是一个函数，该函数会在 setState函数调用完成并且组件开始重渲染时调用，可以用该函数来监听渲染是否完成。​​​​​​​

16.React和vue.js的相似性和差异性是什么？

相似性如下。

（1）都是用于创建UI的 JavaScript库。

（2）都是快速和轻量级的代码库（这里指 React核心库）。

（3）都有基于组件的架构。

（4）都使用虚拟DOM。

（5）都可以放在单独的HTML文件中，或者放在 Webpack设置的一个更复杂的模块中。

（6）都有独立但常用的路由器和状态管理库。

它们最大的区别在于 Vue. js通常使用HTML模板文件，而 React完全使用 JavaScript创建虚拟DOM。 Vue. js还具有对于“可变状态”的“ reactivity”的重新渲染的自动化检测系统

17.生命周期调用方法的顺序？
React生命周期分为三大周期，11个阶段，生命周期方法调用顺序分别如下。

（1）在创建期的五大阶段，调用方法的顺序如下。

getDetaultProps：定义默认属性数据。

getInitialState：初始化默认状态数据。

component WillMount：组件即将被构建。

render：渲染组件。

componentDidMount：组件构建完成

（2）在存在期的五大阶段，调用方法的顺序如下。

componentWillReceiveProps：组件即将接收新的属性数据。

shouldComponentUpdate：判断组件是否应该更新。

componnent WillUpdate：组件即将更新。

render：渲染组件。

componentDidUpdate：组件更新完成。

（3）在销毁期的一个阶段，调用方法 componentWillUnmount，表示组件即将被销毀。
18.使用状态要注意哪些事情？

要注意以下几点。

不要直接更新状态

状态更新可能是异步的

状态更新要合并。

数据从上向下流动

19.说说 React组件开发中关于作用域的常见问题。

在 EMAScript5语法规范中，关于作用域的常见问题如下。

（1）在map等方法的回调函数中，要绑定作用域this（通过bind方法）。

（2）父组件传递给子组件方法的作用域是父组件实例化对象，无法改变。

（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。

在 EMAScript6语法规范中，关于作用域的常见问题如下。

（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。

（2）事件回调函数要绑定组件作用域。

（3）父组件传递方法要绑定父组件作用域。

总之，在 EMAScript6语法规范中，组件方法的作用域是可以改变的。

20.在 Redux中使用 Action要注意哪些问题？

在Redux中使用 Action的时候， Action文件里尽量保持 Action文件的纯净，传入什么数据就返回什么数据，最妤把请求的数据和 Action方法分离开，以保持 Action的纯净。

21.在 Reducer文件里，对于返回的结果，要注意哪些问题？

在 Reducer文件里，对于返回的结果，必须要使用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。

22.在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

在当前组件的 props中，包含 location属性对象，包含当前页面路由地址信息，在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。