React简述

237 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

简述

React 是 facebook 搞出来的一个轻量级的组件库,用于解决前端视图层的一些问题,就是 MVC 中 V 层的问题,它内部的 Instagram 网站就是用React 搭建的。

React 解决了什么问题?

解决了三个问题:

1.组件复用问题,

2.性能问题,

3.兼容性问题。

React 的协议?

React 遵循的协议是“BSD 许可证 + 专利开源协议”,这个协议比较奇葩,如果你的产品跟 facebook 没有竞争关系,你可以自由的使用 React,但是如果有竞争关系,你的React 的使用许可将会被取消

React 的工作原理?

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用diff 的结果来更新 DOM。

使用 React 有何优点?

1.只需查看 render 函数就会很容易知道一个组件是如何被渲染的

2.JSX 的引入,使得组件的代码更加可读,也更容易看懂组件的布局,或者组件之间是如何互相引用的

3.支持服务端渲染,这可以改进 SEO 和性能

4.易于测试

5.React 只关注 View 层,所以可以和其它任何框架(如 Backbone.js, Angular.js)一起使用

React 生命周期函数

一、初始化阶段:

  • getDefaultProps: 获取实例的默认属性
  • getInitialState: 获取每个实例的初始化状态
  • componentWillMount: 组件即将被装载、渲染到页面上
  • render: 组件在这里生成虚拟的 DOM 节点
  • componentDidMount: 组件真正在被装载之后

二、运行中状态:

  • componentWillReceiveProps: 组件将要接收到属性的时候调用
  • shouldComponentUpdate: 组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
  • componentWillUpdate: 组件即将更新,不能修改属性和状态 render:组件重新描绘
  • componentDidUpdate: 组件已经更新

三、销毁阶段:

  • componentWillUnmount: 组件即将销毁