1、react发展－－－facebook在构建instagram网站的时候遇见两个问题
1、数据绑定的时候，大量操作真实dom，性能成本太高
2、网站的数据流向太混乱，不好控制
于是facebook起初调研过市场上已存的mvc框架，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源
React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。
特点：
1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。
2.高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。
React 不像其他框架那样提供了许多复杂的概念与烦琐的 API，它以 Minimal API Interface 为目标，只提供组件化相关的非常少量的 API。同时为了保持灵活性，它没有自创一套规则，而是尽可能地让用户使用原生 JavaScript 进行开发。只要熟悉原生 JavaScript 并了解重要概念后，就可以很容易上手 React 应用开发。
虚拟dom：
DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM
JSX语法
JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。它完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML 语法来创建虚拟元素。
组件是一个集合体，就是把html，js，css放在一起形成一个组件，组件的写法就是jsx语法编写，创建react的一个组件
1、下载react lib文件
2、导入各个文件
3、创建组件 createClass
4、渲染 render
1 . XML 基本语法
定义标签时，只允许被一个标签包裹。
标签一定要闭合。
2 . 元素类型
小写首字母对应 DOM 元素
大写首字母对应组件元素自然
3、react中如何去写css
1、基于class –（className）
2、基于inner css （facebook 主张的方式） 行间样式(json)
3、原型链和全局变量
为何使用webpack
1、目前我们写的react组件的特点
1、所有组件都写在一个js文件里面 不好维护 写多个js去引入也无法识别
2、通过browser.js将jsx转换成js 性能慢
2、如何解决 借助前段构建工具webpack
1、webpack是facebook为react量身打造的构建工具
2、主要作用是实现模块化，代码整合，代码分割的作用
3、使用webpack整合以后 也不需要使用browser进行将jsx转成js了
3 、也就是使用webpack实现模块化—什么是模块化
1、模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似
2、react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口
3、在其他组件当中可以调用这些对外提供成接口的组件
React ES6写法
Nodejs模块的引入
// ES6写法
import React from ‘react’;
组件的声明
// ES6写法
class TodoList extends React.Component
-
属性和状态是react中数据传递的载体
-
组件接收属性值的传递：
this.props.属性名
例如：
{this.props.title}
); } });
-
属性传递的方式
1、key-value形式
2、展开式传入
3、内部声明getDefaultProps
4、es6 使用 组件. defaultProps — 构造器（this.props.xxx）
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
重要的方法-状态：
重要的方法：
getInitialState ：定义初始状态 /es6 在constructor 中 通过this .state={} 设置
this.state ：读取状态
this.setState：更新组件的状态 ／es6中 在事件中调用需要在构造器中 通过bind绑定this
状态修改： 组件会发生二次渲染 react组件中的render方法会重新执行
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149831.html
