1. 背景介绍
1.1 React 是什么？
React 起源于Facebook的内部项目。2013年开源供给大家使用。是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
React的声明式特点减少了操作DOM的性能损耗，同时组件化开发使得大量的组件得以复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。
1.2 React 特点
- 声明式设计 −React采用声明范式，可以轻松描述应用。
- 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，也维护的数据安全性
1.3 虚拟DOM
虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化。
1.4 CDN引入React
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
使用CDN方式引入的时候，script片段代码需要申明type为text/babel
1.4 JSX语法
直接写在 JavaScript 语言之中的HTML 语言就是JSX。JSX,是一种 JavaScript 的语法扩展，它允许 HTML 与 JavaScript 的混写。JSX是facebook为React框架开发的一套语法糖
const dom = <h1>Hello, world!</h1>;
你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。
const name = 'Tina';
const element = (
<div>
Hello, {
name}!
</div>
);
1.5 JS语法
react提供了一个createElement方法创建虚拟DOM，方法接收3个参数，第一个参数是标签名，第二是标签属性，第三个是标签内容。
const dom = React.createElement('h1','','hello,word!')
2.项目搭建
使用脚手架创建项目
npx是webpack的运行工具
npx create-react-app my-app
cd my-app
npm start
添加路由库 react-router-dom
npm i react-router-dom
3.组件
一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)把这些局部功能组装到一起，就形成了组件。在react里，组件的最小颗粒度是一个标签元素
3.1 创建组件
-
用函数定义组件
function HelloMessage(props) { return <h1>Hello World!</h1>; } -
使用Class定义组件
class HelloMessage extends React.Component { render() { return <h1>Hello World!</h1>; } }
4.State状态
React 把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
在React中，我们可以在组件（Class定义的组件）里添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'World'};
}
render() {
return <h1>Hello {
this.state.name}!</h1>;
}
}
更改组件的name属性，即可更改页面渲染结果
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'World'};
}
nameChange(){
this.setState({
name:'Tina'
})
}
render() {
return <div>
<h1>Hello {
this.state.name}!</h1>
<button onClick={
()=>{
this.nameChange()}}>变身</button>
</div>;
}
}