什么是 React
用于构建用户界面的 JavaScript 库
React API 是处理视图的 API 集合
React仅仅负责View层渲染一个视图渲染的工具库，不做框架的事情（打包、
utils等）
React 组件组成
一个 React 组件基本组成：
继承
React.Componentrender函数返回一个视图
ReactDOM.render: 将React元素解析为虚拟DOM，再渲染为真实DOM
class MyBtn extends React.Component {
render() {
return <div>myBtn</div>;
}
}
render 之前：
所有的
JSX都会转成字符串所有输入的内容都会转义
JSX
JSX 是什么？
一种标签语法，
js进行的语法扩展不是字符串，也不是
HTML标签描述UI呈现与交互的直观形式
被编译后最终是生成
React元素单标签必须要闭合
createElement 与 JSX 对比
JSX 被编译后会变成 React 元素，而 createElement 可以直接创建一个 React 元素
为什么 React 不把视图和逻辑分开？
渲染和
UI标记是有逻辑耦合的，特意将逻辑放在UI上，更直观即时是这样的耦合，也能实现关注点分离（主逻辑可以抽离到外部）
ReactDOM.render
HTML中的div容器是根节点根节点内所有内容都是由
ReactDOM进行管理一个
React应用只有一个根节点用
ReactDOM.render方法将React元素渲染到根节点中会深度地对比新旧元素的状态，只会做必要的真实
DOM更新
渲染之前，每个 React 元素组成一个虚拟 DOM 对象结构；
更新之前，形成新的虚拟 DOM 对象结构，对比新旧虚拟 DOM 节点，分析出两者的不同点，形成一个 DOM 更新的补丁，更新真实 DOM
ReactDOM.render(
// react 元素，
// 根节点
)
react 元素/组件调用规范：
使用
JSX语法使用
React.createElement将组件转换为React元素HTML标签
<MyBtn title="xxx" />
React.createElement(MyBtn, { title: xxx })
<div>abc</div>
React 元素是不可变的对象(immutable object)
不能添加属性
不能修改属性
不能删除属性
不能修改属性的枚举（
enumerable）、配置（configurable）、可写（writable）只能由一个根元素
React 组件渲染流程
React主动调用Test组件将属性集合转换对象
props->{ title: xxx }将对象作为
props传入组件替换
JSX中props或者state中的变量ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染
props 和 state 区别：
state数据池，组件内部管理数据的容器，组件内部可写可读props属性池，外部调用组件时传入的属性集合，组件内部可读不可写
函数组件一定是一个纯函数，纯函数能保证绝对的复用性
组件：
组件的视图片段
包含视图标记、事件、数据、逻辑、外部配置项
componentDidMount: 组件已经渲染到 DOM 中以后运行，已经被挂载到真实 DOM 中后运行的函数
state 使用注意事项：
必须使用
setState方法更改state多个
setState会合并调用props和state更新数据要谨慎，尽量避免直接依赖他们
this.setState((state, props)=>{
// state：指代上一个 state
// props：此次更新时使用的 props
})
-
setState操作合并是浅合并
this.state = {
obj,
arr
}
// 只改变 obj 的引用值，arr 引用保持不变
this.setState({
obj: newObj
})
- 给
state赋值时，要使用全新的值（引用），避免使用原值覆盖
// 1
this.setState({
arr: [...this.state.arr, 4]
})
// 2
var newArr = this.state.arr.concat(4)
其他
组件无论如何都是不知道其他组件是否是有状态的
组件也并不关心其他组件是函数组件还是类组件
state是组件内部特有的数据封装其他组件时无法读写修改组件的
state组件可以通过其他组件调用的时候传入属性
props 虽然是响应式的，在组件内部是只读的，所以仍然无法修改其他组件的
state这种数据（状态）由上而下传递的方式，叫做单向数据流
state只能传递给自己的子组件，即只能影响当前组件的UI组件有无状态是可以切换的，例如，可以在事件函数中增加
state
handleBtnClk() {
this.state = {
title: "this.state.title",
}
}
npx：npm v5.2+ 的包运行工具
