随笔分类 - react
摘要：我暂时遇到了两种情况。 ### 第一种情况：useImperativeHandle函数写错 useImperativeHandle的第二个参数的返回值是作为ref.current的值，但是我写箭头函数写快了，忘记返回值了。 ``` useImperativeHandle(ref, () => {fo
阅读全文
摘要：默认情况下，当组件中的props和state发生改变，会导致组件重新渲染。父组件的重新渲染会导致子组件的重新渲染。 可以使用usememo去进行一些优化，有些在父组件中跟子组件完全无关的状态变更导致的重新渲染完全是浪费。 注意：usememo在首次render时需要做一些额外工作来提供缓存。所以不利
阅读全文
摘要：react自己有一套自己的事件机制，它在DOM事件体系基础上做了改进，减少了内存消耗，并且最大程度的消除了ie等浏览器的不兼容问题。 它的特点有以下几个： react上注册的事件最终会绑定到document上，而不是react组件对应的dom（减少内存开销，因为所有的事件都绑定在document上，
阅读全文
摘要：react中的插槽 react和vue不一样，没有插槽这个组件，如果要实现这个效果，可以从下面两个角度来实现。 插槽实现方法1 function son(props) { return ( <div> <div> {props.children[0]} </div> <div> {props.chi
阅读全文
摘要：共性 useState和setState都是用来改变变量然后让界面同步渲染的方法，他们都是异步操作，不能直接获取state的值。 区别 参数： setState(参数1， 参数2); // 参数1表示要更改的数据，参数2是回调函数，可以拿到最新的数据 useState(参数); // useStat
阅读全文
摘要：### 为什么用key 在虚拟dom进行diff算法的时候，使用key可以对key进行比较然后来判断两个节点是否是同一节点，极大的增加了速度。 ### 为什么避免使用index 先来总结好了的： 1. 如果只是单纯的渲染或者是顺序操作，使用index没有问题 2. 如果是逆序的删除或者增加，会增加多
阅读全文
摘要：###hooks 啥子是Hooks，就是react的函数式组件，也很简单，就是在函数中返回一个DOM，它最主要有4个函数的使用，会了这四个Hooks就通关了。他们分别是useState，useEffect，useMemo，useCallback。 ###useState useState是用来新建变
阅读全文
摘要：###redux简介 首先简单介绍一下redux，redux是react的集中状态管理器，相当于vue的vuex，是为了让组件间能更好通信，它主要的有三个概念，store，actions，reducer。 ###redux使用原则 单一数据源：整个应用的全局state被存储在一颗object tre
阅读全文
摘要：react路由传参的方式有好几种，接下来大概讲一下。 ###向路由组件传输params参数 首先需要在路由组件传递oarams参数，如下： 接下来需要在route中声明接收params参数，如下： 然后在路由组件中接收params参数： 接着看实际变化和后台打印结果： URL地址的变化： props
阅读全文
摘要：react的路由使用也太太太复杂了吧，有各种各样的的花式，主要是有太多的配置项可以选择了，接下来就写一下我自己学到的。 ###路由的下载 react的路由需要额外下载，然后有三种，分别是供web，软件，两种都能用的any。然后我们主要用的是web，下载命令：npm i react-router-do
阅读全文
摘要：react中组件通信方法有两种，第一种是利用父子组件的props通信，然后达到全组件互相通信，适合用于两个直接相连的父子组件；第二种是利用PubSubjs，这是一个外部的库，所以需要你额外去下载，适合复杂的组件之间进行通信。具体使用方法如下： ###props实现父子组件通信 //父组件 expor
阅读全文
摘要：因为做了几次了，然后都忘了列表渲染具体怎么写的了，所以自己写一个随笔记录一下，加深一下记忆。 react的列表渲染，就是在你有一个数组数据需要对它进行遍历单个组件并进行赋值的过程。示例： 对普通标签的列表渲染。 render() { let listData = [1, 2, 3, 4] retur
阅读全文
摘要：不知道怎么去遍历数据然后根据数据的多少渲染多少个组件。解决方案，使用map，然后返回组件。 对于第一个默认的多选盒子，一开始使用checked去选择它默认是否选中，但是之后就无法再改变它的值，解决方法1，使用了defaultChecked： 3.父子组件进行通信我也有点忘了，这里主要遇到的是子组件去
阅读全文
