JSX(JavaScript and XML)
一切皆js，all in js
<footer>
<info />
</footer>
说明：jsx是react的一项技术，不是全新语言，js的扩展
JSX原理
React.createElement
只能有一个顶层元素
JSX具体用法
基本语法
标签类型
dom标签 div p 首字母小写
自定义标签 -- 组件 首字母大写
虚拟dom与非dom属性
什么是虚拟dom(virtual dom)
批处理 diff
dom操作成本高，大量的计算
尽可能少的操作dom，提高渲染效率
非dom属性以及如何使用
dangerouslySetInnerHTML === innerHTML
xss
ref
React.createRef()
id
不能在函数组件上使用(没有实例)
函数内使用
key
提高渲染性能，唯一标识，index(不推荐)
Props介绍与应用
什么是props
组件 props state
如何使用
props 对外的接口 接收外部传入的数据 只读
react 数据流单向的， 组件的复用性，不可预测，违背组件的设计原则
中间人 state
定义方式
函数组件 props 无状态组件
类组件 state 生命周期 有状态 无状态 class
-- 父子组件传值
事件监听this绑定
react中 class创建的组件 需要手动绑定this
this四种绑定方式
1、constructor bind绑定 推荐
2、直接在jsx元素进行绑定
会造成额外的渲染 影响性能 不推荐
3、使用箭头函数 ES6类字段 推荐
4、使用箭头函数 jsx元素直接绑定 不推荐
state(状态)介绍与应用
什么是state
props 对外的接口 可读性 不能直接修改
state 组件内部的状态 控制元素的显示隐藏 可修改
state 状态
setState
stateState异步更新，不会立马更新，批量延迟更新 多个setState合并处理 高效
React控制的事件处理程序(onClick, onChange) 生命周期钩子函数 不会同步更新state 异步
setState同步更新
原生js绑定的事件 setTimeout
如何使用
组件的state如何划分
state props 影响ui展示
原则
1、让组件尽可能少状态
UI渲染，数据展示，没有复杂交互 props 不适用state function 函数组件
无状态组件 UI组件 函数式组件 纯函数 无交互 无数据逻辑层的展示
2、随着时间产生变化的数据 有交互 使用 state class
props和state对比
1、组件内的数据，js对象，保存信息，控制组件的形态 UI
2、props父组件传入的，定义外部组件的接口 this.props props
3、props只读，不能直接修改
4、state组件内部的状态，作用范围 当前组件 私有变量 使用state来跟踪状态(控制元素的显示隐藏) setState
React 生命周期 组件 class 类组件
挂载阶段
construtor(props)
初始化操作 state this绑定
componentWillMount
组件即将挂载，render之前调用
只会调用一次
很少使用
setState 不会引起重新渲染
使用同步的setState 不会出发额外的render处理
16.3 过时
产生副作用，或着订阅
render
唯一必要方法 返回一个react元素
不负责组件的实际渲染工作，只是返回一个UI的描述
注意：
必须是一个纯函数，在这里不能改变state，setState，不能执行任何有副作用的操作
作用
计算props/state 返回对应的结果
React.createElement jsx 转换为 vDOM对象模型
componentDidMount
组件挂载到dom后触发，只会调用一次，获取到真实的dom
向服务端请求数据
1、可以保证获取到数据时，组件已经处于挂载状态，直接操作dom，初始化第三方库
2、保证在任何情况下，只会调用一次，不会发送多余的数据请求
setState 引起组件重新渲染
作用
数据可以获取到，真实dom也可以获取到
可以进行数据请求，进行数据修改
操作真实dom，第三方库的实力话
更新阶段
componentWillReceiveProps(nextProps)
props引起的组件更新过程中， this.setState
只要父组件的render函数被调用，无论父组件传给子组件的props有没有改变，都会触发
shouldComponentUpdate
通知react组件是否更新，有权利阻止更新
尽量遵循默认行为，状态改变，组件就会被重新渲染
要求必须有返回结果
减少组件不必要的渲染 提高性能
不能调用setState
componentWillUpdate(nextProps, nextState)
更新发生前，一般很少用
不能调用setState
componentDidUpdate(prevProps, prevState)
更新完成调用，有机会来操作dom
判断是否发送网络请求
适合发送网络请求
卸载阶段
componentWillUnmount
做一些清理工作
定时器，取消一些网络请求，移除事件监听
受控组件与非受控组件
表单
受控组件
依赖状态，默认值实时音社到状态 state
必须使用onChange
双向绑定
优点
符合react的数据流
修改使用更加方便，完全不需要获取dom，
便于数据处理
非受控组件
不受控制 获取dom，操作dom ref
好处很容易与第三方组件结合
React中事件和this
React中的事件
直接卸载jsx
onEventType onClick onChange onBlur 驼峰式
监听事件this
事件传参
React Hook快速入门
什么是React Hook
16.8 新增特性
使用state 在函数组件中
hook
钩子
为什么使用Hook
代码更加简洁
上手更加简单
react上手不容易
1、生命周期难以理解，很难熟练应用
2、Redux 状态管理，概念非常多，难以理解，中文文档
hook 函数式组件 有状态的函数式组件 state useState
Hook核心概念与应用
useState
每次渲染，函数都会重新执行，函数执行完毕，所有的内存都会释放掉，useState
在函数内部创建一个当前函数组件的装填，提供一个可修改状态的方法
useEffect
总会执行一些副作用操作，函数组件，纯函数，props，固定的输入总会得到固定的输出
什么副作用
只想渲染一个dom->dom渲染完了，还想执行一段逻辑(副作用)
没有发生在数据向视图转换过程中的逻辑
ajax 访问原生dom对象，定时器
hook之前，副作用是不被允许的
useEffect componentDidMount componentDidUpdate 相同的用途 合并成api
useEffect 组件渲染到屏幕之后才会执行， 返回一个清除副作用的函数
一般不需要同步， 需要同步用 useLayoutEffect
useContext
useReducer redux
redux
useState内部就是靠useReducer实现的
useState的替代方案 (state, action) => newState
评估好当前应用场景
userRef
16 React.createRef 创建ref方法
{current: ''}
访问dom节点，useEffect去操作dom
useMemo&useCallback
useMemo 把创建函数和依赖项数组作为参数传入useMemo
useCallback 接收一个内联回调函数和一个依赖项数组
计算的缓存，记忆函数
自定义Hook
逻辑功能相同的片段 -> 封装成单独的函数来使用
自定义hook 函数
自定义hook中可以调用官方提供的hook useState
use开头，表示只能在函数组件中进行使用
use开头
render props 高阶组件 redux
复用状态逻辑的方式，而不是服用state本身
事实上Hook每次调用都有一个独立的state
抽离公共代码
Hook使用规则
1、只能在最顶层使用hook
不要在循环、条件、嵌套函数中调用hook
2、只在React函数中调用hook
