React 入门

一、React的简介

---

• 英文官网: https://reactjs.org/
• 中文官网: https://react.docschina.org/
• 资料地址：git@gitee.com:zhong-qing-wang/react-code.git

1. react是什么

• 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  
  

2. 谁开发的？

3. 特点

原生js

    1. 原生JavaScript操作DOM繁琐，效率低（DOM-APi操作UI）
    2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
    3. 原生JavaScript没有组件化编码方案，代码的复用率低

React

    1. 声明式编码
    2. 组件化编码
    3. React Native 编写原生应用
    4. 高效（优秀的 Diffing 算法）

例子

• 原生js实现列表渲染
  

• 数据更新，原生js的操作

• 数据更新，原生React的操作

二、React的基本使用

1. 环境搭建

引入react环境
`

• 注意：js引是有顺序的

    <!-- 引入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>

hello，React的小案例

    <!-- 准备一个容器 -->
    <div id="app"></div>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
        // 1. 创建虚拟DOM
        const VDOM = <h1>hello, React</h1> /* 此处一定不要写引号，因为不是字符串 */
        // ReactDOM.render(虚拟DOM，容器)
        ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

2. 创建虚拟 DOM 的两种方式

纯JS方式(一般不用)

• 这里不需要引入babel.min.js

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

    <!-- 容器 -->
    <div id="app"></div>

    <script type="text/javascript">
        // 1. 创建虚拟DOM
        // const VDOM = React.createElement(标签名， 标签属性，标签内容)
        const VDOM = React.createElement('h1', { id: 'title' }, 'hello, React')

        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

JSX方式

    <div id="app"></div>
    <script type="text/babel">
        // 1. 创建虚拟DOM
        const VDOM = (<h1 id='title'>hello, React</h1>)

        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

两者的区别

3. 虚拟DOM与真实DOM

	<!-- 准备好一个容器 -->
	<div id="test"></div>
	<div id="demo"></div>

	<script type="text/babel">
		//1.创建虚拟DOM
		const VDOM = (<h1 id="title">
			<span>Hello,React</span>
		</h1>)

		// 真实DOM
		const TDOM = document.getElementById('demo')

		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
		console.log('虚拟DOM', VDOM);
		console.log('真实DOM', TDOM);
	</script>

总结：虚拟DOM

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

4. React JSX

1. 全称: JavaScript XML
2. react 定义的一种类似于XML的JS 扩展语法: JS + XML 本质是React.createElement(component, props, ...children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM,它不是字符串, 也不是HTML/XML标签,它最终产生的就是一个JS对象
4. 标签中混入JS表达式时要用{}。
5. 样式的类名指定不要用class，要用className。
6. 内联样式，要用style={{key:value}}的形式去写。
7. 只有一个根标签
8. 标签必须闭合
9. 标签首字母
   • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
   • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

	<style>
		.title {
			background-color: orange;
			width: 200px;
		}
	</style>

	<!-- 准备好一个容器-->
	<div id="test"></div>

	<script type="text/babel">
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//1.创建虚拟DOM
		const VDOM = (<div>
			<h2 className="title" id={myId.toLowerCase()}>
				<span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
			</h2>
			<h2 className="title" id={myId.toUpperCase()}>
				<span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
			</h2>
			<input type="text" />
			<good>123</good>  //html有就渲染，否则报错
			<Good>456</Good>  // 报错
		</div>)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	</script>

5. 【js语句(代码)】与【js表达式】的区别

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

    1. a
    2. a+b
    3. demo(1)
    4. arr.map() 
    5. function test () {}

js语句(代码)

    1. if(){}
    2. for(){}
    3. switch(){case:xxxx}

6. jsx小案例

	<!-- 准备好一个容器 -->
	<div id="test"></div>

	<script type="text/babel">
		//模拟一些数据
		const data = ['Angular', 'React', 'Vue']
		//1.创建虚拟DOM
		const VDOM = (<div>
			<h4>前端js框架列表</h4>
			<ul>
				{
					data.map((item, index) => {
						return <li key={index}>{item}</li>
					})
				}
			</ul>
		</div>)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	</script>

三、模块与组件、模块化与组件化的理解

模块

    1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
    3. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
    3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

    1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image 等等)
    2. 为什么要用组件： 一个界面的功能更复杂
    3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

• 当应用的 js 都以模块来编写的, 这个应用就是一个模块化的应用

组件化

• 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用