字符串比较
有时候在一些大小写较为敏感的字符串需要比较的时候，但是又担心首字母的大小写会搞错，可以对两边的首字母都使用小写进行比较。
状态管理
判断状态使用：如果一个组件的状态需要更新状态并且反射到另外一个组件，那么它就是局部的，反之则是全局的。状态类型：• 远程状态：基本由API远程发送存在服务器• UI状态：基本保存在本地用于管理样式，列表等区别：远程状态是异步的，UI状态是同步的。状态放置：• 单个组件可以使用 State Reducer 或者 Ref• 如果需要共享做状态提升同样使用上三种方式但是要放在父组件• 如果有些状态需要全局使用而且可能存在深层嵌套的情况，使用上下文API和state与reducer配合使用• 如果需要管理远程状态以及在大型项目中需要管理状态可以使用第三方状态库：redux react query等
URL
需要在前后页面之间传递浏览器状态：需要做一些本地缓存的时候使用
性能优化小技巧
当我们有出现相同位置相同元素但是需要重置或者更新状态的时候，也需要用key-prop用于告诉react这里需要更新。
组件嵌套问题
不要在一个组件里面声明另外一个组件，否则每次父组件更新都会更新子组件的状态导致额外的性能开销和不必要的状态更新，所以组件的更新都是在函数的顶层实现的。
状态更新的批处理
多个状态更新的时候不会一个一个更新，而是所有状态片段都一次性更新，所以一般而言只有重新呈现以后函数值才会更新，如果需要在重新呈现之前就使用它，可以传一个回调函数进setstate。
react对事件的处理
以单击事件为例，如果有多个单击事件，react把他们捆绑到一起然后会创建一个单击事件在fiber tree的根组件上，所以实际上react对应用程序中的所有事件执行事件委托。
react的实质
react本身是一个库而不是一个框架，它通过和其他库联合使用最后完成一个程序，在react的基础上，有一些延申出来的框架，如remix,next.js但react本身只是一个库。
组件的生命周期
第一次呈现：以挂载中间：重新呈现最后：销毁/卸载
呈现逻辑和事件处理函数
事件处理函数函数的副作用：当一个函数去修改一些外部数据的时候就会产生一些副作用纯函数：不会产生副作用的函数，使用相同的输入永远会得到相同的输出呈现逻辑：一些返回的代码块用于最终页面的呈现，比如条件渲染和列表呈现之类的。涉及到呈现逻辑的时候，组件一定是纯函数，负责渲染的函数一定是与外界没有交流的，所以呈现逻辑不允许执行网络请求或者用dom api,也不能在呈现函数中更新状态。
Hooks
相当于react内置的一些函数是用于链接到react的内部机制，基本都是Use开头的。Hooks只能在顶层调用，不能在条件里面调用每次使用hooks都是用同一个调用的方式，因为实际上，hooks调用的时候会在fiber树里面创造一个链表。所以如果在条件里面调用中间的hooks不触发的话，第一个hooks仍旧是指向第二个hooks此时第三个hooks就无法实现。也可以避免对每个钩子取名所以每次调用Hooks的时候总是以相同的顺序调用的，如果提前返回也会报错。
useEffect
依赖数组：决定这个useEffect什么时候使用，开始就用的话就用空数组用处：保持组件和外部系统的同步useEffect需要用用依赖项数组来了解什么时候触发useEffect(fn,[x,y,z])xyz变化的时候触发useEffect(fn,[])首次挂载触发。
useState
状态更新的时候往往需要等一个组件完全渲染完成才会更新，所以哪怕已经更新了状态但是组件没有成功重新渲染那么状态仍会保留在之前的状态下。解决方法：把这个状态放到一个回调函数中，回调函数执行以后会立刻返回新的状态当原始状态依赖于某个计算的时候，就在初始化的时候传入一个回调函数更新状态的时候如果需要立刻使用新的状态需要使用回调函数进行更新，其实也可以所有更新都用回调函数来避免问题，更新对象和数组的时候不要去修改对象和数组，要创建一个新的对象或者数组然后传进去。
useRef
相当于一个小号的state，更新state的时候会重新刷新页面但是更新Ref不会引起重新刷新，而且Ref的更新是同步而不是异步的，意味着我们可以更新以后立刻使用Ref，而且Ref是可变的。所以Ref常常用于储存DOM元素还有其他任何不需要重新渲染的可变值。
useReducer
是一种复杂的管理状态的方式，当状态值是一个对象的时候更多的时候这个方法,reducer可以处理几乎所有的状态更新逻辑，使得整个组件变得更加的清晰以及提升可重用性，以及多个State使用的时候会出现难以管理的情况，而且有时候一个更新状态会取决于其他多个状态，也可以更好的对状态进行封装，在组件中就不需要多次进行状态的修改。使用方法：状态储存在第一个参数，减速器函数储存在减速器函数中减速器函数会储存我们所有需要的处理状态的逻辑,中心位置允许我们将状态逻辑和组件本身完全的解耦，减速器函数是一个纯函数，永远返回一个更新的状态（这里的更新的状态不是指状态的变异，而是指返回一个新的状态）。action用于确定用哪种方法来处理状态eg:const[state,dispatch]=useReducer(reducer,initialState)使用小技巧：在Reducer使用的时候，reducer函数里面经常会用到switch函数来管理进入的状态，而不是使用if来进行控制与Usestate：state对于单一简单的事情是好用的，比如简单的数字字符串或者简单的对象，在多个相互关联或者依赖的时候以及处理的时候需要一些复杂的逻辑处理的时候使用Reducer，如果状态需要同时更新也用reducer。
useContext
用于读取提供的上下文中的内容的钩子。
自定义钩子
基本上，钩子都是关于可重用性的，当逻辑需要重用但是里面没用钩子的时候，可以设置成函数，当逻辑需要重用且里面有钩子的时候，就要使用自定义钩子。一个钩子只需要做一件意义特定的事情即可,在创建自定义钩子的时候要使用use开头在自定义钩子中返回对象或者数组是一件常见的事情。
路由
路由通常通过第三方库来实现，路由是单页应用程序实现的关键，路由的方法避免了之前通过状态管理加条件渲染的方式来达成不同组件的切换，减少了状态管理的麻烦以及让每个页面和组件更加分离。SPA：指在客户端实现的应用程序,页面有js更新，也就意味着在SPA中永远不会出现整个页面重新加载的情况。路由嵌套：在一个路由中使用双标签而不是单标签然后在其中填充其他的路由，这个时候子路由中的路径不需要写父路由。Outlet：类似于children方法，可以把子路由的部分渲染出来。在URL中存储状态：可以把这个状态进行全局共享，可以把这个状态转到下一个页面，可以使书签成为可能。Navigate：使用这个钩子可以用于重定向，返回上一步等内容。
CSS Moudles
对每个组件有一个独立的Css文件单独引入组件中，一方面可以增强样式的复用性，一方面可以防止所有组件都使用index.css带来的性能损耗。
上下文API
用于解决有时候需要把参数传递到嵌套很深的路由中，我们需要从父组件直接传递到子组件，所以上下文API是直接在整个应用程序中传递数据的系统。所以组件只要订阅的对应的上下问那么每次上下文更新都会更新组件。用createcontext创建用usecontext取出，往往会和usereducer一起使用来进行内部状态的管理，在上下文比较复杂的时候，可以将一个部分的上下文封装起来用一个自定义钩子进行取用。
