m0_46694056的博客

抛开Next.js框架不谈，想必其他项目也经常会遇到国际化方案，大概逻辑都是差不多的，只是说这次本人碰巧在Next上的项目有这样的需求，并记录下来。

在多人开发的时候，或者说二开的时候，不知道大家有没有这样一种体会：在项目中，往往会这样给一个组件加样式:效果：但是现在这里要介绍一种库-----，先下载:常规用法然后我们就能将上面的常规步骤写成如下这样：效果：这时你就会发现两个写法不一样，但是却能达到同样的效果，而且这个新的写法你会发现，其实就是给这个元素加上一个唯一的，但是不是你自己加啊，它不仅可以可以应用于外层的元素的，它还能同时在里面写上后代元素标签，且样式也是能生效的，甚至你还可以嵌入其他、、写法等等，就像下面这样写：通过pro

*前言：本次分享将主要自定义实现useState为主，以通俗易懂的目的让大家了解useState实现的大体逻辑。一、hook的价值：hook出现的意义是巨大的，在React Conf 2018 会议上，react团队的leader---- Sophie Alpert提出了三个class组件存在的问题（而hook的出现就是来解决这些的）：逻辑复用问题：要逻辑复用，在class组件中无非是用高阶组件，或者render props来解决，但是如果项目庞大的话，就有可能造成组件层级过深，无限嵌套导致追

前言：作用：首先useMemo它使用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，就不用在每次渲染的时候再做计算场景：既然是用作缓存来用，那场景就可能有：比如说当你登陆之后，你的个人信息一般是不会变的，当你退出登陆，重新输入另外一个人的账号密码之后，这个时候个人信息可能就变了，那这样我就可以把账号和密码`两个作为依赖项，当他们变了，那就更新个人信息，否则拿缓存的值，从而达到优化的目的也许当你从A页面跳转到B页面，而B页面...

前言：在项目中，我们往往需要香后端发起请求，而在函数组件中，如果直接用axios或者fetch的话，拿到的数据要渲染到UI上，往往是不方便的，所以需要引入react-query，来满足我们增删改查的基本操作一、查数据：1、导包2、用包中的QueryClientProvider组件包裹住整个App组件，并提供一个clienthome组件：就直接使用useQusery方法即可。useQusery说明：参数一：是一个id，你随便取，但是要唯一，这个唯一键值将在内部用于在整个程序中重新获取数据

前言：如果在看本文章之前，你对context API比较了解的话，该hook将会推出比这个更加高级的语法1、导入：该hook依旧是从react包中导入即可，无需从第三方包导入2、使用：我们事先准备三个组件根组件：< App / >子组件：< Son />孙子组件：< GrandSon />根组件：子组件：孙子组件：页面效果：观察发现，也确实能够拿到从根组件传过来的值总结：你如果在此之前，对原本的context的API比较熟悉的话，

前言：在react中创建class组件时，我们能够很容易地用特定的方法，来判别这个组件在什么生命周期里面处理什么逻辑，比如说，在componentDidMount、componentDidUpdate中我们可能需要发一些请求，或者做一些初始化的操作，又或者在componentWillUnmount 我们有可能做一些清楚订阅的操作；但是在函数组件中，你要知道这个组件现在处在那个生命周期，却比较麻烦，甚至有点无从下手，这时候我们就可以使用hook中的useEffect()1、导入：这个和useState一

前言：在react中，我们在开始学习中比较喜欢用class组件，但在实际开发中，更多的是用函数组件，但函数组件中，又很难像class组件拥有state的特性，来管理当前组件的一些状态，所以在函数组件中我们可以引用useState的hook1、导入：这个方法无需下载第三方包，直接在react包中引用即可，2、使用：我们先创建一个home函数组件吧展示效果：我们发现确实能够实现类似class组件一样可以管理自己的组件的state了，其语法大致如下：let [ state, setState

本文很长，但是我相信你只要坚持看完，必定会有所收获的。+ 概述：Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。+ 拓展：首先要明白Redux 并不是一只能和React一起使用，它同样还支持其它界面库。它体小精悍（只有2kB，包括依赖），却有很强大的插件扩展生态。

先看demo：根组件：只关心我框出来的内容即可Home组件：HomeItem组件：Invoice组件：导入的依赖：场景：比如说，我想访问主页，但是每个人的主页信息是不同的，直接访问/home肯定是确定不了的，需要携带一些参数，比如id和name之类的，这样你才能确定你访问是谁的主页，那路径就有可能是类似这样的/home/zhangsan，又或者说有可能会有同名的人，那我有可能会进行分组，想找具体组的具体的“zhangsan”，那就有可能访问的是/home/123/zhangsan

前言：最新版的react路由有些改变，大致总结如下用Routes代替了原来的Switch之前的<Route />组件的component属性变成了element引进了新的API:<Outlet />貌似自带精准匹配，无需再加exact属性了先上dome：根组件：各子组建：页面展示：默认展示页面：首页展示页面：登陆展示页面：首页的子页面：未匹配到的页面：*总结与注意点：在涉及到嵌套路由时，一定要在其父组件的最后面用Outlet作为出口

先上图谱：看图可知，一个react组件大致整个生命周期就分为三个阶段：挂载时、更新时、卸载时，那下面就分别分析下这三个阶段吧。。。挂载时：这个这阶段就是将当组件（类组件）实例创建并插入 DOM 中时，会顺序依次调用????的这些函数更新时：该阶段其实就是state或者props发生变化时，就会依次调用????的这些函数：卸载时：当组件从 DOM 中移除时会调用????的方法：当然还有组件发生错误的时候，其实还会调用????的方法（但是不常用）：...

前言：首先在react中是没有插槽的概念的，但是可以类比vue或者其他组件库中“槽”的概念，官方解释：案例：“匿名插槽：”根组件：父组件：效果展示：经观察发现，这个<Fu>...</Fu>组件内部不管写什么，并在函数里面以{props.children}的形式去接收，就可以直接渲染了“具名插槽：”根组件：Fu组件：展示效果：经观察，如果是需要类似具名插槽的效果的话，都是在组件标签上加上自定义属性就行了，而这个自定义属性的值是个符合jsx语法即可，未

*场景：首先你能来看本篇文章，那说明你的代码有可能类似是这样：当点击按钮，调用test函数，结果打印this的时候，或者说想在test函数里面访问this的一些属性的时候，控制台却是undefined如果说你只是单纯地想解决问题的话，有如下解决方案，直接挑选如下你想要的方案代码即可run了，但是你要想多了解一下的话，还请继续往下看。方案一：方案二：方案三：方案四：解决思路：导致问题的原因：首先在class类里面的函数，它是无法自己绑定这个函数的this的，所以说你就只能自己手动

*前言：其实步骤和vue没什么区别，大致相同，语法不通罢了。1、安装脚手架控制台输入如下命令，全局安装react脚手架，-g参数就是代表的全局的意思，会基础的npm都应该知道。npm install -g create- react-app稍等片刻，发现有类似如下显示，就说明安装成功了说在某某某文件夹下添加成功某个包，用时多少多少，当然我这里用的是nvm，可能信息有点不一样，但翻译翻译就可以了。2、使用脚手架创建项目在控制台输入如下命令：create-react-app dome01