React 是JavaScript 库，可以快速构建快速响应的大型WEB应用程序。
JSX
JSX是一种 JavaScript 的语法扩展，可以很好的描述UI应该呈现的交互本质并具有 JavaScript 的全部功能。
为什么使用JSX：
React 认为渲染逻辑本质与其他UI逻辑 内在耦合， JSX 和 UI 在一起，会在视觉上产生辅助的作用，还可以使React 显示更多的错误和警告消息。
Babel 会把 JSX 转义为 React.createElement() 函数调用。这个对象被称为 React 元素。
元素渲染
和浏览器DOM 不同 React 元素是开始极小的普通对象，React DOM 会负责将React 元素 和 DOM 进行关联并渲染到根元素中。
React 元素是不可变对象，一旦被创建，就无法更改。每次更新都会创建一个新元素，但 ReactDOM 会将元素和他的子元素与他们之前的状态进行比较（diff）,只进行必要的更新。
组件 和 Props
React 鼓励将UI拆分为独立可复用的代码，这些独立可复用的代码，可作为组件。概念上，组件为接受任意的入参（props）,并返回用于描述页面展示内容的React元素。(组件的首字母必须大写)
函数组件 和 class 组件
函数组件：使用 function 创建的组件
class 组件 使用关键字class 并用extends继承React.Component
Props
Props 是只读的，组件本身禁止修改props的值。
生命周期
只有class 组件 有用生命周期
生命周期一共包含4部分
挂载：组件实例被创建并插入dom中时，调用顺序
constructor()
初始化state 绑定props 和 方法
static getDerivedStateFromProps()在调用render前调用，
render()
渲染元素
compomentDidMount()
组件挂在后立即调用，只执行一次更新：组建state 或者 props 更新时执行，调用顺序
static getDerivedStateFromProps()
shouldComponentUpdate()
默认返回true，根据返回值来判断是否重新渲染。首次调用或使用
forceUpdate（）
不会触发，在初始化和更新都会调用，
render()
getSnapshotBeforeUpdate()
在渲染输出之前调用，可以在组件更新之前获取一些DOM信息，返回值将传递给componentDidUpdate()
componentDidUpdate()
更新后立即调用，首次渲染不调用，尽量直接使用props的值来比较state卸载：组建从DOM移除会调用
componentWillUnmount()
卸载时调用，执行一些清理工作，例如清除timer，监听，取消网络请求等
错误处理：渲染过程，生命周期或子组件的构造函数抛出错误时
static getDerivedStateFromError(error)
抛出错误后被调用，渲染阶段调用，不用存在副作用
componentDidCatch(error,info)
error：抛出的错误
nfo：带有componentStack key 的对象 包含组件引发错误的栈信息。
事件处理
React 元素的事件处理和DOM元素很相似，但是语法不同：
React 的事件的明明采用小驼峰（namelCase）,而不是纯小写。
使用JSX语法时需要传入一个函数而不是字符串。
React 不能通过返回 false 来阻止默认行为，而必须使用preventDefault。
React 默认不会绑定this，如果没有绑定this，则返回undefined。
条件渲染
遵从JavaScript语法，支持if else && 三目运算符等，如果先阻止渲染，在render 内返回null。
列表和key
当使用map循环输出的时候，需要指定一个key，key最好不要是index 索引值，因为数组是有序的集合，如果数组中一位改变了，后面的都改变了，这不符合设计key 的初衷。
表单
主要是受控组件 和 非受控 组件的概念理解。以及解决方案Formik
状态提升
如果各子组件一样要处理相同的数据，就要将共享得数据提升到父组件里。 在React内，任何的可变数据都应该对应唯一的数据源。推荐开发工具查看状态变化（react-devtools）
网友评论