一、React 说明
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设他们自己的 Instagram 的网站。
做出来以后，发现这套东西很好用，在2013年5月开源了。目前已经成为前端的三大主流框架。
- React官网：https://reactjs.org/
- React中文：https://react.docschina.org/
1、React 的特点
- 使用JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门;
- 性能高：通过 diff算法 和 虚拟DOM 实现视图的高效渲染和更新;
-
声明式、组件化、一处学习到处编写
哒哒哒
2、react 核心
虚拟DOM：React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率
为什么用虚拟DOM?
当DOM发生更改时需要遍历DOM对象的属性, 而原生DOM可遍历属性多达200多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大。
虚拟DOM的处理方式？
1） 用 JS对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中。
2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。
3） 把记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
Diff算法:
最小化页面重绘
当我们使用React在render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将会创建一棵新的React元素树。
React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方），此处所采用的算法就是diff算法。
二、JSX语法全面入门
总结
1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;
2. 更加语义化, 更加直观, 代码可读性更高;
3. 性能相对原生方式更加好一些
1.jsx语法创建虚拟DOM
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1 获取页面上的真实容器
const containerDiv = document.getElementById('app');
// 2. jsx 语法创建虚拟dom
const vDom = <div><span>hello</span><p>Nice to meet you! Sir.</p></div>;
// 3. 将虚拟 dom 放进去
ReactDOM.render(vDom, containerDiv);
</script>
执行结果
<script type="text/babel">
// 1. jsx语法创建虚拟DOM
const vDom = <div><span>非物质文化遗憾！</span><p>藏族唐卡!</p></div>;
// 3. 将虚拟的DOM放入
ReactDOM.render(vDom, document.getElementById('app'));
</script>
执行结果
2.典型js方式 和 JSX方式 对比：
<body>
<div id="app1"></div>
<div id="app2"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.定义变量
const myClass = 'box01';
const myContent = 'hello world';
// 2.创建虚拟 dom
const vDom = React.createElement('span',{className:myClass},myContent);
// 3. 渲染到页面
ReactDOM.render(vDom,document.getElementById('app1'));
</script>
<script type="text/babel">
// 1. 创建虚拟的DOM
const vDom1 = <span className={myClass.toLocaleUpperCase()}> {myContent} </span>;
// 2. 渲染到页面
ReactDOM.render(vDom1, document.getElementById('app2'));
</script>
</body>
image.png
3. 多层标签嵌套
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<div>
<h3>多层标签嵌套</h3>
<p>嵌套多个标签，要用一个大标签包起来</p>
</div>
,
document.getElementById('app')
);
</script>
</body>
多层标签嵌套
4.js中的变量, 表达式要写在{}内
<script type="text/babel">
ReactDOM.render(
<div>
<p>100+200 = {100+200}</p>
</div>
,
document.getElementById('app')
);
</script>
5.内联样式通过对象方式引入
<script type="text/babel">
const myStyle = {
backgroundColor:'blue',
color:'red',
fontSize:'30px'
}
ReactDOM.render(
<div>
<p style={myStyle}>全球果实盛宴</p>
</div>
,
document.getElementById('app')
);
</script>
image.png
6.数组遍历
<script type="text/babel">
// 1. 数据
const dataArr = [
{name: '张三', age: 29},
{name: '李四', age: 20},
{name: '王五', age: 42},
{name: '老裕泰', age: 80}
];
// 2 创建虚拟dom
const vDom = (
<ul>
{/* 请注意，注释要采用这种方式, */}
{dataArr.map((data,index)=> //注意这里没有尖括号了，可以换成() ,但是不能用尖括号
<li key={index}>序号：{index+1} - 姓名:{data.name}- 年龄：{data.age}岁</li>
)}
</ul>
);
ReactDOM.render(vDom,document.getElementById('app'));
</script>
遍历数据
四、React中的组件/模块, 组件化/模块化
1）组件
一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)
把这些局部功能组装到一起就形成了完整的一个大的功能
主要目的在于: 复用代码, 提高项目运行效率。
2）组件化
如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。
3）模块
多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合性低, 可移植性高, 执行效率好。
4）模块化
如果一个应用都是用模块的形式来构建的，那么这个应用就是模块化应用。
构造函数创建组件：
<script type="text/babel">
function Func1() {
return <h2>妙明本心</h2>
}
ReactDOM.render(
<Func1/>,
document.getElementById('app')
);
</script>
<script type="text/babel">
function Func2(props) {
return <h3>哒哒哒：{props.name} ，三个人分别是{props.name}</h3>
}
ReactDOM.render(
<Func2 title = "古人" name={["李白 ","李煜 ","张择端 "]} />,
document.getElementById('app')
)
</script>
image.png
<script type="text/babel">
function Name(props) {
return <p>我叫{props.name},</p>
}
function Skill(props) {
return <p>我的技能是 {props.skill}</p>
}
function LogInfo() {
return(
<div>
<Name name="鸣人"/>
<Skill skill = {["大玉螺旋丸 ","手里剑 ","会飞"]}/>
</div>
)
}
ReactDOM.render(
<LogInfo/>,
document.getElementById('app')
)
</script>
image.png
网友评论