Au_ust的博客

例如哔哩哔哩官网上展现的资源其实都是通过请求获取的：是从霹雳霹雳服务器上请求信息，然后传输到客户端本地（浏览器）页面资源越多，传输的的次数越多，每一次的传输就被称为前端向后端请求有三种方式：ajax(原生),axios（第三方库）,fetch（替代原生ajax的API）

函数式组件只有属性，没有状态，更没有生命周期的概念，但是函数式组件在React16.8引入hooks以后，可以在函数式组件里使用state和生命周期等特性，拥有类似于类组件的能力，同时保持简洁和易用性。在生命周期的某个阶段会触发的东西写不写本身不会影响组件的执行，但是写的话会在生命周期的某个阶段触发整个生命中周期分为三个阶段：初始化阶段、运行阶段、销毁阶段执行顺序：WillMount=>render=>DidMount。

pubilc里放的是我们整个项目的静态资源，每次可以通过localhost：3000访问资源也是先访问的public里的index.html效果是这样。

设置默认值，使用ref来从DOM节点中获取表单数据，defaultValue设置默认值，不去控制后续的更新非受控组件可以减少你的代码量，也不会受外部的控制。

React写进{}内的东西，不允许被当作代码块解析，是为了防止xss攻击和代码注入是一种常见的安全漏洞，攻击者通过注入恶意脚本到网页中，从而在用户浏览器中执行恶意代码。XSS 攻击通常发生在 Web 应用程序中，尤其是当用户输入的内容未经过滤或转义就直接显示在页面上时。：恶意用户可以通过注入 HTML 或 JavaScript 代码，篡改页面内容或窃取用户数据不过如果你想忽略跨站脚本攻击也是可以的dangerouslySetInnerHTML 是React 中用于直接设置 HTML 内容的一个特殊属性。

kerwin老师我来了。

axios可以在浏览器和node.js两边跑，可以向服务端发起ajax请求，也可以在node.js里运行，向远端服务发送http请求获取失败了，报错404了查了半夜发现前后端端口号不同涉嫌跨域（CORS）问题，此时要么修改前端，要么修改后端，消除跨域问题我选择了把二者端口号改成一样的，就不跨域了好了，现在变成这样了，报错还是404GPT用它最后的波纹告诉我，用liver server，会自动帮我运行一个静态服务器再把后端端口号改为和前端一样的就好了这么重要的东西为什么没人说！！

Redux感觉像组件通信的中介state存放被管理的状态action是申请改哪些数据，传入什么参数reducer是怎么修改数据我的理解更像是action像一个储存方法的对象，reducer是具体的方法的实现，不同的方法实现也不一样store是个仓库，存储应用状态的仓库。

在index.js里编辑，创建路由，绑定路由效果是这样，可以输入路径进入对应页面。

如果不强制刷新是这样：每次count在下一轮才更新react自动进行批处理，一次按按钮修改两次count，最终一起渲染，叫自动批处理。

三个关于生命周期的钩子负责初始化负责卸载判断是否已经卸载进行对bool值的切换toggle可以切换state的状态，setFalse可以设置为false,setTrue可以设置为true可以实现类似的效果其实useBoolean是在useToggle的基础上实现的，useBoolean主要是针对bool值实现的，useToggle是可以在其他值上实现的只不过useToggle的参数里，第一个是true，第二个就默认是false，所以也可以设置成别的值还有别的hooks，以后用到了单独讲。

</div>其实这些自定义hooks也被别人写好了，比如ahooks和react-use下载ahooksahooks暂时不支持raect19，所以需要降版本npm install ahooks//下载ahooksreturn (<div>

刚刚数字一直在疯涨，导致他疯涨的原因是我的useEffect没加依赖数组，还有axios的url，如果我的数据文件在public里，可以直接从根目录访问（好像学过），要写成这样👇。还有一个无语的bug是箭头函数的return每次都会加大括号忘记加retuen，不加return又会格式化到下一行。里面包的是函数，之前学的useCallback可以解决函数被Object.Is()判别为不同的问题。每次改变状态时都会重新渲染，提升性能，使用memo，只有props不同的时候才会渲染。的值无法动态传递，因为。

useLayoutEffect在useEffect之前触发这样会闪屏，因为是异步的，两次都渲染了换上useLayoutEffect不闪屏，在异步的情况是等两者都执行完以后渲染触发多次的时候还是useEffect好，解决闪屏问题用useLayoutEffect。

<button onClick={handleClick}>点我</button>

然后创建jsx文件，修改main文件：导入Todos，写入Todos组件。改变value的值、使用Immer整合更改。

首先看这个代码这里面使用了多个useState()，在点击事件里只对count做改变，count++，对应的count2和count3不改变，是因为react里有一套状态管理机制，React 内部维护了一个状态池（state pool），用于存储每个组件的状态。当组件重新渲染时，React 会根据组件的顺序查找对应的状态值。例如在这个代码里，每点击一次，第一个useState内部就会更新保存他的调用顺序，以便在下一次调用的时候直接获取上次执行的结果、点击以后报错。

前面写了三千字没保存，恨！

添加点击事件在react里也可以添加事件对象e。

组件化->封装性React提供函数组件实现组件化React和传统JS的区别就是JS需要手动管理DOM操作，: 采用组件化开发，通过虚拟DOM提升性能。是一种软件设计模式，全称为（模型-视图-控制器）。它将应用程序的逻辑分为三个核心组件，以实现代码的分离和模块化保证自己的node版本在14.18+、16+main.jsx是主入口vite构建的react和vue很像,但是npx构建的完全不像可以用ESlint检测代码报错。

先发一篇博客证明我要开始学了。