学习周报
React入门到入坟
这是一个基于React官方文档以及尚硅谷React视频课程的学习
Hello React (开始React)
什么是React
React是一个将数据渲染成HTML视图的开源JavaScript库(library)
为什么要学React
网页一般为响应式系统，以“监听事件，消息驱动”为基础，事件发生后执行既定的回调函数，使状态发生改变，ui更新
原生JavaScript的缺点：
- 状态更新,UI不会自动更新,需要手动地调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护.如果依赖链路长．则会遇到“Callback Hell”
因此，我们使用React让状态更新后，ui自动更新；让代码组件化，可复用，可封装；状态间的相互依赖关系，只需要声明即可
在网站中添加React
步骤 1： 添加一个 DOM 容器到 HTML
<!-- 准备好一个容器 -->
<div id="test"></div>
要给这个div元素添加上一个ID方便我们待会用Javascript获取到它
步骤 2：添加 React 库
<!-- ... 其它 HTML ... -->
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
第一个为React，第二个为React-dom
步骤 3：使用React在网页中添加元素
- 创建虚拟DOM
let VDOM = React.createElement('h1',{id:'hello'},Hello React);
React.createElement()方法用于创建虚拟DOM，有三个参数，分别是标签名，标签属性，元素内容
2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
ReactDOM.render()方法用于将虚拟DOM渲染到页面上，第一个参数为虚拟DOM，第二个参数为DOM 容器
虚拟DOM(Virtual DOM)
什么是虚拟DOM
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
为什么要使用虚拟DOM
它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
虚拟DOM可以减少操作真实DOM的次数(通过Diff)，提高网页的运行效率，并提高开发效率
JSX(JavaScript XML)
为什么要学习JSX
JSX 的全称为 JavaScript XML，是react定义的一种类似于XML的JS扩展语法，用来简化创建虚拟DOM
我们可以将上面Hello React实例改成：
let VDOM = <h1 id = 'hello'>Hello,React</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
可以知道使用JSX可以让创建虚拟DOM变得简单且直观
使用JSX的准备工作
JSX语法不符合JS代码规范，需要使用babel翻译
首先添加babel的库
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
//添加babel支持
然后在script标签中添加 type=“text/babel” 属性
<script type="text/babel">
</script>
JSX语法规范
- 创建虚拟DOM时，不要写引号
let VDOM = <h1>Hello,React</h1> //此处一定不要加引号，因为不是字符串，是虚拟DOM
- JSX允许在标签中写入JS表达式，用{}将表达式括起来
let VDOM = <h1>Hello,React{1+1}</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
但要注意的是{}中只能写入JS表达式，写入if while等结构会报错
3. 标签中的class要用className
<h1 className='hello'>Hello,React</h1>
改成class是为了与JS中class类作区分
4. 标签中的内联样式要以JS代码形式写入
<h1 style={{color:'white',fontSize:'40px'}}></h1>
注意属性名转为小驼峰
5. 创建虚拟DOM时只能有一个根标签
6. 标签必须闭合
当标签不需要内容时可以使用自结束
<input type="text"/>
- 标签开头为小写时，是HTML标签；大写时，是组件
因此在自定义组件时要将首字母大写
|