1.何为react
-
什么是react？
react是一个用于构建用户界面的JS库；
-
react能干什么？
通过组件化的方式，构建快速响应的大型web应用程序；
-
react是怎么样做的？
1.声明式，声明式方式书写界面（jsx），更加直观方便；
与声明式对应的还有命令式，即每行命令指示程序如何进行下一步详细操作，相比而言代码复杂工作量大，优点过程可见，易于修改。声明式就是对命令式的封装
//声明式
reactDom.render(<h1 onClick={()=>{console.log("1")}}>hello !!!</h1>,document.getElementById(`root`));
//命令式
let root = document .getElementById(`root`);
let h1 = document.createElement(`h1`);
h1.innerHTML = "hello !!!";
h1.addEventListener('click',()=>{console.log("1")});
root.appendChild(h1);
2.组件化，将界面分割为各个组件，便于复用。高内聚低耦合，高内聚即为组件内部包含完整dom结构、样式 、逻辑。低耦合组件间相互依赖少易拆分，易组合。
2.为何要使用JSX？
-
什么是jsx？
jsx全称javascript xml，意为js中的可扩展标记语言（EXtensible Markup Language），这意味着开发者遵循jsx的语法可以直接在js代码中书写同html高度相似的界面结构，声明式的构建页面，代码直观清晰，可读性高，jsx无法被浏览器识别，所以编写的jsx代码最终会被bebal编译为用React.createElement方式实现的代码，这样看来jsx其实是React.createElement的语法糖。
-
jsx与babel
下方这个网站可以在线体验babel编译功能 ，babel是个针对js的编译工具，他可以将以ES6（ES2015+）规范编写的代码，转换为向后兼容的代码，以便在老旧浏览器或其他环境中正常运行，同时babel还拥有许多其他插件来转换不同的东西，例如可以将jsx代码，转换为普通的react代码命令。通常情况下babel会被集成到webpack之中在打包时对代码进行编译；
https://www.babeljs.cn/repl
babel利用AST抽象语法树来进行编译工作，AST 全称为 AbstractSyntax Tree，译为抽象语法树。在 JavaScript 中，任何一个对象（变量、函数、表达式等）都可以转化为一个抽象语法树的形式。抽象语法树本质就是一个树形结构的对象。如何得到AST，首先分词，然后利用分词结果，分析并关联各个词条，整合成一个树状结构的表达形式，整合后的对象就是AST,简单来说AST就是以对象的形式来呈现的代码段。
const a = 5;
//词法分析
[{value:'const',type:'keyword'},{value:'a',type:'identifier'}...]
babel工作逻辑：源代码>>>利用源代码语法规则分词分析并关联>>>得到源代码AST>>>>利用目标源代码AST规则对应转换>>>得到目标源代码AST >>> 根据目标源码语法还原>>>目标源代码；
最终babel通过上诉过程将JSX代码转化为浏览器可执行的 react.createElement等方法，babel存在的意义是让开发者能用上新规范中的API和新颖方便的编写方式，通过Babel编译后又能让这些代码兼容老旧特殊的运行环境。
3. 虚拟DOM（virtualDOM）？
-
什么是虚拟DOM？
虚拟DOM只是一个普通对象，该对象记录一些值来描述真实DOM的节点是什么样子。在react中创建 一个虚拟dom，可以直接使用react.createElement (type,config,chlidren)方法创建,返回一个包含type 、key、props、_source等属性的对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react学习</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
console.log(LikeButton,e,e(LikeButton))
let domContainer = document.querySelector('#root');
ReactDOM.render(e(LikeButton), domContainer);
</script>
</body>
</html>
虚拟DOM优点 ：
1、差异化更新（diff算法），精准更新，减少DOM操作；
2、处理浏览器兼容问题，如不同平台的点击事件绑定（事件代理，和书写差异）；
3、内容经过防范XSS攻击过滤（在渲染所有输入内容之前，默认会进行转义）；
4、虚拟DOM编译为真实DOM由react实现，可以由react帮你实现跨平台编译，Android、iOS；
虚拟DOM缺点 ：
1、虚拟DOM即是真实DOM的对象形式呈现，必然占用额外内存；
2、首次渲染比直接渲染HTML文件里的节点要慢，需要等待定义虚拟DOM的JS文件加载并运行完毕，才能渲染；
函数组件（无状态组件）与类组件
组件：将UI界面划分为多块独立可复用的模块，代表这些模块的代码片段即为组件；
相同点：
都返回一个react元素（虚拟DOM对象）
不同点：
1.类组件是面向对象思想，需要实例化类组件有额外的内存占用，函数组件是函数式编程思想;
2.类组件中每次渲染的props与state是最新的，而函数组件每次渲染时，函数方法被重新调用，传入的props如果以闭包的形式被使用，到使用这个属性时，他将呈现被传入的状态，而不是最新的状态，这也是被称之为无状态组件的原因，在reack 16.8 以后的版本推出了hook的概念，再此以后函数组件就不能够被叫做无状态组件了；
其他：
PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component一致，这个比较是react实现的并自动执行，实际过程中深层次数据不同不能引起组件更新
React Hooks
React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。
Hook让开发者在函数组件中可以利用其API“钩入”React state状态以及相应的生命周期，这样解决了过去无状态和生命周期的弊端，React Hooks 的出现标志着，函数组件不可以再被称为无状态组件，React 将只有类组件和函数组件的概念，都可以保持状态并拥有生命周期。
hooks 为函数组件提供了状态，也支持在函数组件中进行数据获取、订阅事件解绑事件等等。hook相关的方法需要在组件方法内部调用，常见的hook API有：useState（添加状态） useEffect(副作用，模拟生命周期mount和update) useContext（直接获取祖先元素通过createContext创建的context） useReducer（useState单向数据流的简易实现，组件内的单向数据流） useCallback useMemo（pureComponent的函数组件实现）
useState(初始值),返回一个数组[get值,set值]
let [name,set] = React.useState("初始值");
useEffect(回调函数,[监听值变化1,监听值变化2,...]),模拟生命周期，第2个值为空则只执行一次，否则根据参数2中的变化执行,useLayoutEffect这个函数与useEffect相同，只是执行时机不同，useEffect是异步任务，等待浏览器渲染完成执行，useLayoutEffect是同步任务阻塞界面渲染，等同于componentDidMount，在虚拟DOM构建完毕，浏览器真正渲染前执行
React.useEffect(()=>{
setTimeout(()=>{
console.log(1)
},3000)
effect
return()=>{
cleanup
}
},[import1,import2])
useContext(context变量)
//注意改函数需要Provider 外层包裹，否则无法获取CountContext
const count = useContext(CountContext);
useReducer(reducer函数,initalState初始值)
//注意改函数需要Provider 外层包裹，否则无法获取CountContext
const count = useContext(CountContext);
useMemo和memo
React.memo()可接受2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新，与shouldComponentUpdate()功能类似。
useMemo是memo的hook实现，useMemo接受2个参数第一个为factory函数，该函数返回值即为useMemo返回值，第二个参数为依赖项，只有依赖项发生变化，才执行useMemo中参数一的方法拿到最新的值并渲染；这里值得注意的是useCallback同useMemo功能一样，只是返回值不同，useMemo返回值为参数一的返回值，useCallback返回参数一本身！！！
const otherName = useMemo(()=>changeName(name),[name])
return (
<>
<div>{otherName}</div>
<div>{children}</div>
</>
)
}
useRef方法，在函数组件内定义一个存储空间，功能类似this，包含一个current属性，每次该函数组件重新渲染时useRef创建的对象都是同一个内存地址的应用，而createRef在此点则不同，它每次都是新建一个内存空间（新建对象）。
function App() {
const [num, setNum] = React.useState(0)
const uRef = React.useRef()
const cRef = React.createRef()
const btnClk = () => {
setNum((num) => num + 1)
}
React.useEffect(() => {
uRef.current = num
cRef.current = num
console.log(num,'in effect')
}, [num])
console.log(uRef.current, cRef.current, 'state的改变引起的组件重渲染')
return (
<div className="App">
<input ref={uRef}/>
<input ref={cRef}/>
<button onClick={btnClk}>button</button>
</div>
);
}
useCallback缓存方法，避免不必要的reRender或计算，接受两个参数一个是回调方法，一个依赖项，同样依赖项变化会导致useCallback重新执行返回新的方法，下面是结合useRef使用的经典案例
function Form() {
const [text, updateText] = useState('');
const textRef = useRef();
useLayoutEffect(() => {
textRef.current = text; // 将 text 写入到 ref
});
const handleSubmit = useCallback(() => {
const currentText = textRef.current; // 从 ref 中读取 text
alert(currentText);
}, [textRef]); // handleSubmit 只会依赖 textRef 的变化。不会在 text 改变时更新
return (
<>
<input value={text} onChange={e => updateText(e.target.value)} />
<ExpensiveTree onSubmit={handleSubmit} />
</>
);
}
React 生命周期 16.3+
多版本生命周期大同小异，主要3个阶段 挂载阶段（实例化阶段） 更新阶段（续存阶段） 销毁阶段
挂载阶段钩子执行顺序： 构造函数-constructor 传入属性修改状态-getDerivedStateFromProps 生成虚拟DOM-render 组件挂载完毕-componentDidMount
更新阶段钩子执行顺序：传入属性修改状态-getDerivedStateFromProps 确认是否更新-shouldComponentUpdate 生成虚拟DOM-render 获取更新前快照-getSnapshotBeforeUpdate 组件更新完毕-componentDidUpdate
销毁阶段： 组件销毁前-componentWillUnmount
