React 是一个用于构建用户界面的 JAVASCRIPT 库。 起源: React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站 描述
由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单
这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native
项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。
如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机
react的特点
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
声明式设计
// 声明式
const element1 = React.createElement(
'div',
{className:"greeting"},
'哈哈'
)
// 过程式
element2 = document.createElement 'div'
element2.className = 'greeting'
element2.innerHTML = '哈哈'
// 类似于这样一种简化的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
ReactDOM.render(
element1,
document.getElementById('root')
);
组件(两大特点 封装 重用)
react的使用离不开三个核心的库
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
jsx语法允许html和js的混写, 使页面数据和样式的操作变得钢架简单 核心
HTML
标签(以 <
开头),就用 HTML
规则解析;{
开头的结构,就用 js
规则解析;遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
在jsx语法中, 标签中写代码注释需要放到{} 中
从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖
元素(Elements)是 React 应用中最小的构建部件(或者说构建块,building blocks)。 元素用于描述你在页面上看到的内容
在React中,元素是不能发生突变的,要进行元素的,一旦创建了元素,就不能修改其子元素或者是相关的属性
元素更新的措施是: 创建一个新的元素并使用render函数重新渲染
参考链接 https://zhuanlan.zhihu.com/purerender/2034637 在react中,当元素发生变化的时候,并不会进行所有的元素的更新,
在react内部,执行了一个diff 算法,只对当前变化的节点进行检测更新,而不是更新所有的节点
在react中,使用diff + virtual dom 结合的方式,实现元素的变化检测与更新