一、React概述
英文官网：https://reactjs.org/
中文网站：https://react.docschina.org/
用于构建用户界面的 JavaScript 库（React只涉及JS，不涉及HTML/CSS），由Facebook在2013年5月开源，目前最新稳定版是v17.0.2。
项目中使用React的两种方式：
| ①脚本引入式——简单直接，一般用于小型页面 |
| ②脚手架方式——适合于真正的大型项目开发 |
二、JSX
JSX：JavaScript XML，使用XML语法创建JS对象的技术，等价于React.createElement() —— 本身是一种JS的语法变种，浏览器无法直接执行，必需Babel编译器的转化。
语法要求如下：
①一段JSX可以用( )括起来，也可以不用 —— 推荐使用
②JSX采用严格的XML语法：一段JSX有且只有一个根标签
③JSX中所有的HTML标签都是一个变量名——这类变量名只允许用纯小写形式
④用户自定义组件名对应的标签必须以大写字母开头
⑤标签的属性必须使用单引号或双引号括起来
⑥一些特殊的属性名必须加以修改， 例如： class变为className
⑦JSX中“拼接”变量——本质是“数据绑定”，内容绑定和属性绑定语法完全一样
<h1 title={age}> {age} </h1>
⑧JSX对象的样式绑定分为两种：
className： 绑定为一个字符串即可
style：不能赋值为字符串，必须绑定为一个“样式对象”，形如：{color:'red', backgroundColor: '#fff'}
⑨JSX可以绑定原生DOM事件，但是必须改为“小驼峰命名法”，并且赋值时必须绑定为函数
<button onClick={ f2 }></button>
⑩JSX中可以声明注释，写法：{/* 注释内容 */}
三、React中自定义组件
React中提供了两种创建自定义组件的语法：
语法1：函数式组件
function 组件名( ){
return (JSX)
}
let el = (<组件名></组件名>)
语法2：class式组件
class 组件名 extends React.Component {
render(){
return (JSX)
}
}
let el = (<组件名></组件名>)
一、React项目脚手架
Vue.js为了方便开发者使用Vue.js的全部特性，提供了一个Vue-CLI工具，用于创建脚手架项目；
React为了方便开发者使用React的全部特性，提供了一个create-react-app工具，用于创建脚手架项目；
使用方法：
①确保Node >= 14.0.0 和 npm >= 5.6， NPM仓库建议使用淘宝或华为的镜像
node -v
npm -v
npm config get registry
②下载/安装Windows全局命令：
npm i -g create-react-app
npm下载的全局命令默认保存在 c:/User/用户名/AppData/Roaming/npm
③使用全局命令在当前目录下创建脚手架项目：
create-react-app 项目名
注意：项目名不允许包含大写字母
④进入当前目录下创建的项目目录：
⑤启动项目自带的开发服务器：
npm start
| 注意：Windows10开始，命令行界面中只要点击了鼠标左键，就会锁定当前界面不往下执行！！！ 解决方法：点击一下鼠标右键，取消命令行界面锁定。 |
| 如果从NPM默认的官方仓库中下载第三方工具模块速度较慢或下载过程总提示错误，请修改下载仓库： 默认仓库：https://registry.npmjs.org/ 建议修改为淘宝仓库：https://registry.npmmirror.com/ 也可修改为华为仓库：https://repo.huaweicloud.com/repository/npm/ |
| 查看当前仓库地址： npm config get registry 修改当前仓库地址： npm config set registry 仓库地址
|
二、：如何解决React事件监听函数中this指向丢失问题？
看之前发的文章
三、React中的条件渲染
Vue.js中使用v-if / v-else 实现模板中的条件渲染；
小程序中使用 wx:if / wx:else 实现模板中的条件渲染；
React中没有指令概念 —— 只有JS：
f1( ){
if( ){ return (JSX) }
else { return (JSX) }
}
render(){
return (
<div>{ this.f1( ) }</div>
)
}
四、React中的列表渲染
Vue.js中使用v-for 实现模板中的列表项循环渲染；
小程序中使用 wx:for 实现模板中的列表项循环渲染；
React中没有指令系统 —— 只有JS：
f2(){ //把原始数组转化为一个JSX数据
let newList = [ ]
for(let i=0; i<老数组的长度; i++){
newList.push( JSX )
}
return newList
}
render(){
return ( <div>{this.f2()}</div> )
}
三、受控组件和非受控组件
Vue.js中有v-model指令实现“双向数据绑定”：
方向1：Model Data 绑定到 Template View
方向2：Template View 绑定到 Model Data
React中没有模板，没有指令，没有“双向数据绑定”概念。类似概念的解决方案：
| 解决方案1：受控组件 表单元素value绑定到model，只有model改变了表单元素才能改变（即用户的输入无效了） Model：state = { uname: "" } f1=(e)=>{ let uname = e.target.value this.setState({uname}) } JSX： <input value={this.state.uname} onChange={this.f1}/> |
| 解决方案2：非受控组件——了解 myUnameRef = React.createRef( ) JSX：<input ref={this.myUnameRef} /> f3(){ let uname = this.myUnameRef.current.value } |
