React入门笔记

React历史与应用React是一个JavaScript库React：一个用于构建用户界面的JavaScript库。——JordanWalke应用场景：前端应用开发，如Facebook、Instagram、Netflex网页版移动原生应用开发，如Instagram、Discord、Oculus结合Electron进行桌面应用开发3D开发：react-3的历史-fiberReact2010年：Facebook在其php生态中引入了xhp框架，并首次引入组合组件的思想，启发了后来React的设计2011年：JordanWalke创建了FaxJS，也就是后来的React原型2012年:Facebook收购Instagram后，内部使用FaxJS项目，JordanWalke基于FaxJS经验创建React2013年：React正式开源，JordanWalke在JSConf2013上介绍了这个全新的框架2014年：生态爆发，各种新工具/框架围绕React开始出现React的设计思想NativeJavaScriptUI编程痛点Status更新，UI不会自动更新，n需要手动调用DOM进行更新。缺乏基本代码级别的封装和隔离。代码层面没有组件化的UI。UI之间的数据依赖关系需要手动维护。如果依赖链接太长，会造成回调地狱CallbackHell响应和转换Transformationalsystem：给定输入解决输出，比如编译器，数值计算Responsivesystem：监听事件，消息驱动，比如监控系统，UI界面响应式系统事件->执行预定回调->状态变化响应式前端UI编程：事件->执行预定回调->状态变化->UI更新React响应式编程特点状态更新，UI自动更新前端代码可以封装组件化、可重用性、状态之间的相互依赖，只需声明Componentizable组件是组件/原子组件的组合。组件具有外部不可见的内部状态。父组件可以将状态传递到组件中。单向号码按照流程，始终是父组件传递状态给子组件，子组件只能调用函数改变状态使用redux等状态管理库解决状态提升不合理的问题Howto修改DOM：将JSX文件转换为JS文件，使用虚拟DOM树和diff算法更新DOM组件设计组件声明状态和UI映射组件有props和state两个状态组件可以从其他组件组装特点：组件有私有状态statecomponentsacceptexternalpropsstates提供复用根据当前的state和props，返回一个UIReactHooks。最常用的两个Hooks是useState和useEffectuseState：传入一个初始值，返回一个状态，设置状态的功能。用户可以调用该函数实现状态修改importReact,{useState}from'react';const示例=()=>{const[count,setCount]=useState(0);return(

);}useEffect:两个参数，一个是要执行的函数，一个是依赖数组（Dependency不能传）有副作用的函数要传给useEffect执行。副作用是指除了简单的计算之外还要做其他事情，比如网络请求，更新DOM，localStorage数据等。importReact,{useState,useEffect}from'react';constExample=()=>{const[count,setCount]=useState(0);//使用一个sideeffect，传入的[count]数组使这个sideeffectonly只有当count变量改变时才会被调用useEffect(()=>{//副作用：使用浏览器API更新文档标题document.title=`Youclicked${count}times`;},[count]);return();}的使用Hooks规则：只在顶层使用Hooks，不要在循环、条件或嵌套函数中调用Hooks，确保总是在React函数的顶层和任何返回之前调用它们。只在React函数中调用Hooks，不要在普通的JavaScript函数中调用Hooks，可以在React函数组件中调用Hooks，可以在自定义Hooks中调用其他HooksReact不能直接在浏览器中运行，存在这些问题。React的JSX语法不符合JavaScript标准语法。当返回的JSX改变时，如何更新DOMstate/props。更新时，必须重新触发渲染函数。DocumentObjectModel）是浏览器创建的文档对象模型。虚拟DOM树是在JS内存中维护的对象。它具有类似于DOM的树状结构，可以与DOM建立一一对应关系。使用虚拟DOM不需要操作真实DOM提供的API来修改DOM：它给React一个声明性的API，告诉React它希望UI是什么状态，React会确保DOM与状态相匹配，并且前面-端工程师可以从属性、事件处理和手动DOM更新这些操作时，当使用Diff算法改变状态时，首先更新虚拟DOM树，而不是直接更新DOM树。通过Diff算法，找到需要更新的最小节点，然后更新真正的DOM树，达到完美的最小Diff算法，需要O(n^3)的复杂度；牺牲理论上的最小Diff来换取时间，得到一个复杂度为O(n)的算法同类型组件元素的同类型元素的不同类型递归替换更新React状态管理库核心思想：提取state到UI之外进行统一管理。状态管理库的缺点：UI依赖于外部状态管理库，会降低代码的复用性，所以状态管理库总是出现在业务代码中常见的状态管理库：redux,xstate,mobx,recoilstatemachine：当前状态接收外部事件并移动到下一个状态