React

1.React 不是一个完整的MVC,MVVM框架
2.React 跟Web Components不冲突
3.React的特点就是轻
4.组件化开发思路

应用场景:
1.复杂场景下的高性能
2.重用组件库,组件组合

React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

JSX:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的,在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

组件生命周期对比:
componentWillMount() 创建之前
componentDidMount() 创建之后

componentWillUpdate() 更新之前
componentDidUpdate() 更新之后

componentWillUnmount() 卸载之前

componentWillReceiveProps() 组件参数更新


具体生命周期分为:
①实例化
首次实例化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

实例化完成后的更新
getInitialState
componentWillMount
render
componentDidMount

②存在期
组件已存在时的状态改变

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

③销毁&清理期
componentWillUnmount

生命周期

组件嵌套:

逻辑清晰
代码模块化
封装细节

Mixin

代码复用
即插即用
适应性强

使用Mixin实现双向绑定。


推荐阅读:
react组件生命周期过程
React从入门到精通系列
相关:
React主体
webPack
Flex
React-route
Redux
Mocha:测试框架
Istanbul:代码覆盖率

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,295评论 0 2
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,858评论 1 18
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,786评论 14 128
  • react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...
    南航阅读 1,084评论 0 1
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,100评论 2 35