1. 认识React
Posted 友人A ㅤ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1. 认识React相关的知识，希望对你有一定的参考价值。
1. hello, react
老规矩，学习react的第一件事，就是先用hello来开一下光。
- 需要先在项目当中放以下js文件
- 编写代码
<body>
<!-- 准备一个 容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<!--
此处需写babel，不能写javascript
表示写的不是js，而是jsx，并靠babel翻译
-->
<script type="text/babel">
/** 1. 创建虚拟DOM
* 标签处不能写引号，因为它不是字符串
*/
const VDOM = <h1>Hello, React</h1>
/** 2. 渲染虚拟DOM到页面
* ReactDOM.render(虚拟DOM, 容器)
*/
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
- 运行程序
2. 创建虚拟DOM
- 使用jsx创建：
- 使用js创建（一般不用）：
- 使用jsx创建和使用js创建的区别：
- 使用jsx：当在标签中添加标签时可以直接嵌套：
还可以用小括号包裹代码，实现结构层次缩进：
- 使用js：当在标签中嵌套标签时需要再次创建虚拟DOM：
3. 虚拟DOM和真实DOM
虚拟DOM本质是Object类型的对象：
真实DOM：
区别：
- 虚拟DOM身上属性少，真实DOM身上的属性多。因为虚拟DOM是React内部在用，无需真实DOM上面那么多属性
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上
4. jsx语法规则
jsx全称是JavaScript XML，是react定义的一种类似于XML的JS扩展语法：JS + XML。
jsx语法规则：
- 定义虚拟DOM时，不写引号
- 标签中混入JS表达式时要用
- 样式的类名指定不用class，用className
- 内联样式要用style=key: ‘value’的形式去写
- 虚拟DOM必须只有一个根标签
- 单标签必须闭合
- 标签首字母
- 若小写字母开头，则将该标签转为html中同名元素；若html中无该标签对应的同名元素，则报错
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
<script type="text/babel">
const myId = 'title';
const myData = 'hello, react'
// 1. 创建虚拟DOM
const VDOM = (
<div>
<h2 id=myId className='title'>
<span style= color: 'red', fontSize: '20px' >myData</span>
</h2>
<input type="text" />
</div>
)
// 2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
5. 实现一个列表
区分 js语句（代码） 与 js表达式 ：
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
表达式如：
- a
- a + b
- demo(1)
- arr.map()
- function fn ()
- 语句（代码）：
表达式如：
- if ()
- for ()
- switch () case: xxx
因为标签中混入JS表达式时要用，所以遍历数组的时候不能直接用语句进行循环，可以用map表达式来实现：
<script type="text/babel">
// 模拟一些数据
const data = ['aaa', 'bbb', 'ccc']
const VDOM = (
<div>
<h1>列表</h1>
<ul>
data.map((item, index) =>
return <li key=index>item</li>
)
</ul>
</div>
)
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
6. 模块与组件
1. 模块
- 模块：向外提供特定功能的js程序
- 随着业务逻辑增加，代码多且杂，需要拆分模块
- 使用模块能复用js，简化js编写，提高js运行效率
2. 组件
- 组件：实现局部功能效果的代码和资源的集合（html/css/js/image等）
- 因为现在一个界面的功能很复杂，可以使用组件来组成页面
- 使用组件能复用编码，提高运行效率
3. 模块化
当应用的js都以模块来编写的，这个应用就是一个模块化的应用
4. 组件化
当应用是以多组件的方式实现，这个应用就是一个组件化的应用
以上是关于1. 认识React的主要内容，如果未能解决你的问题，请参考以下文章