react基础知识点整理

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适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

 

 

小知识点

1、react两种注释：

这个是在react里面的。

{/* 要注释的内容 */}

在代码行里面用

/* */

 

2、html中的class在react中用className，html中的for在react中用htmlFor，行内样式书写规范style={{color:'red'}}

 

3、react中的表达式的用法：

　　在className中直接可以判断什么状态用什么样式：className={2 > 1 ? 'class-a' : 'class-b'}

　　在模块中直接根据条件来判断具体用哪一个组件：{window.isLoggedIn ?

: }

 

4 . React中的生命周期.

(1).Mount 挂载 (react Components被render解析生成对应的dom节点被插入浏览器的dom结构一个的过程

在浏览器看到组件元素从无到有的过程)

componentWillMount 在render()之前调用，因此在此方法中setState不会触发重新渲染。

componentDIDMount（）

此方法在组件被mounted之后立即被调用，初始化dom节点应该在此方法中，如需要从远端健在数据，这里是实例化网络请求的好地方，此方法中setState会触发组件重新渲染

 

(2).Update 更新(一个mounte的react Component被重新render的过程，但是在这个过程中，dom结构并不一定会发生改变)

props和state的改变产生更新。在重新渲染组建时，如下的方法被调用

componentWillReceiveProps()React在组件mounting期间不会调用此方法，只有在一些组件的props可能被更新的时候才会调用

componentWillUpdate()

当接收新的props或state,componentWillUpdate()在组件渲染之前被立即调用。使用此函数作为在更新发生之前执行准备的机会。初始渲染不会调用此方法。

componentDidUpdate()更新后立即被调用

 

(3).unmount 卸载(一个mount的react Component对应的dom节点被从dom中移除的一个过程)

componentWillUnmount()

当从dom中移除组件时，这个方法会被调用

 

5.prop和state

props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。而state代表的是一个组件内部自身的状态

1.prop 用于定义外部接口，state用于记录内部状态；

2.prop的赋值在外部世界使用组件时，state的赋值在组件内部；

3.组件不应该改变 prop 的值，而 state 存在的目的就是让组件来改变的；

 

6.在受控表单组件中的value值都要与state属性进行绑定，并且需要通过onChange方法去改变值

eg: input textarea select

 

7.React组件间的通信：

1、父组件给子组件传值，采用props的方式进行调用和赋值，在父组件中设置相关属性值或者方法，子组件通过props的方式进行属性赋值或者方法调用；

2、子组件给父组件传值,子组件在子组件的构造方法中调用父组件的方法,此时子组件的构造函数的参数应为子组件需传给父组件的值,之后在父组件的方法中可以拿到子组件传的值

 

8.React 中 keys 的作用

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

 

9.Controlled Component(受控组件) 与 Uncontrolled Component (非受控组件)之间的区别是什么？

受控组件（Controlled Component）代指那些交由 React 控制并且所有的表单数据统一存放的组件；非受控组件（Uncontrolled Component）则是由DOM存放表单数据，并非存放在 React 组件中。

 

10.在生命周期中的哪一步发起 AJAX 请求

应当将AJAX 请求放到 componentDidMount 函数中执行

 

11.React 中的事件处理逻辑

React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

 

12.传入 setState 函数的第二个参数的作用

setState是异步的,该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成。

 

13.路由库React-Router

Router组件本身只是一个容器，真正的路由要通过Route组件定义.

Route组件还可以嵌套。

Link组件用于取代a元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是a元素的React 版本，可以接收Router的状态。

 

14.bind的作用.

答:

在react中如果不用箭头函数,就要用bind来绑定当前组件

bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都是bind()传入的值;

 

 

15.this.props.children 表示组件的所有子节点

它的值有三种可能:

没有子节点 : 数据类型 undefined

一个子节点 : 数据类型 object

多个子节点 : 数据类型 array

 

16.ref 可以获取真实的Dom节点 由于ref获取的是真实DOM,所以必须等到虚拟DOM插入文档以后,才能使用