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 ? <Nav /> : <Login />}

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插入文档以后,才能使用

猜你喜欢

转载自blog.csdn.net/mondy592/article/details/81130455