weixin_45626517的博客

React.creatContext(defaultValue) 创建一个context对象（上下文），这个context对象有两个属性provide :提供数据，可以定义默认值Provider下面的consumer都可以拿到这个valueconsumer ：订阅数据，消费数据，从这个属性可以获取到数据consumer要求children是一个函数，函数的第一个参数为value...

打包打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载。代码分割随着写的应用增大，打的代码包也会增大。尤其是在整合了体积巨大的第三方库的情况下，可能后面的运行会因代码包的体积过大而导致加载时间过长。对代码包进行分割可以避免搞出大体积的代码包。 代码分割是由诸如Webpack，Rollup和 Browserify（factor-bundle）这类打包器支持...

自定义hook，useRef

const countDownTimeoutIndex = React.useRef<any>(0) let seconds = 0 React.useEffect(() => { // 拿store里的倒计时结束时间，还没结束就继续倒数 const endTimeStr = Taro.getStorageSync('phone_verify_countdown') if (!endTimeStr) { return } ...

方法一：前置条件： 1、每个字母下的城市列表使用一个容器包着，容器带有id，方便后续锚点跳转。2、navigatorBar里的字母高定死，知道navigatorBa总高度，方便知道滑动到哪个字母。方法： 锚点跳转监听navigatorBar的滑动距离，计算出所滑动的点是在哪个字母的范围（比如我知道一共有10个字母，一个字母定高10px,我滑动了30px，30px在第三个字母的范围内，所以我就知道了我滑到了第三个字母。）取出这...

State Hook1、16.8以后的新特性，现在可用2、我们之前的组件都是以类的概念来实现的，里面可以 写函数、属性、state、视图，hook就是让我们在不写类的情况下也能实现效果，hook在类组件丽不生效。 (函数组件 )3、没有计划移除class，hook和class并存。（可以写类组件，也可以写函数组件）hook是什么？hook是react的一个特殊的函数，可以引入react的特性，系统的调用函数，useState()后面就带了个括号。state Hoo...

redux的另一个中间件。前置知识点：ES6 generator函数generator函数 生成器的意思。是普通函数，但是带了一个 * 号经典形态：function* test(){}function * test(){}function *test(){}分段使用：generator函数是暂缓执行的，可以分段使用，比如我们调用function* test(){ console.log(1)}test() //没有任何...

redux-thunkredux中间件，处理异步请求在我们用了redux-thunk，actionCreators可以返回一个函数，可以在返回的函数内部可以发送异步，（在该函数里有参数dispatch，发送异步），异步成功之后再分发一个action（纯粹改数据的action）更改数据。 所以可能需要出现两个actionCreators，一个用来分发异步action，如何在这个action里发送一步请求，拿到数据后再分发由另一个actionCreators...

可以看到上一篇react-7里的例子写法是比较复杂的，UI组件和容器（显示页面的UI和业务逻辑没有分离），可以使用react- redux处理一下。react-redux 在上一篇中我们知道了redux是什么和怎么样使用的，而react-redux就是可以帮助我们使用redux的时候简化代码。 思想一：react-redux的作用就是将我们之前写的类组件改成函数组件（无状态组件）在react中提倡尽可能的使用函数组件...

由于redux只能做同步操作，如果需要做异步操作，需要借助中间件（redux-thunk 或者 redux-saga，二选一）。在react中，只要你需要进行状态管理，就需要使用redux；如果想要简化代码，将业务逻辑和UI组件分离，就需要使用react-redux； 如果要后台进行异步交互，就需要使用redux-thunk 或者 redux-saga。react-redux 思想一：react-redux的作用...

使用Javascript开发单页面程序的时候，我们需要管理很多很多状态（state），例如: 服务器的响应，本地生成的尚未持久化到服务器的数据（表单数据），激活的路由，选中的标签，是否显示 加载动效或分页器等等。管理不断变化的状态非常困难，状态的改变可能会引起页面的变化，而 页面的改变也会引起状态的改变，这种改变异常复杂，以至于我们很难捋清业务实现功能。为了 规范的管理各种状态，我们可以使用状态管理机制1.安装redux yarn add redux2....

react组件库：ant-design，antVAntD Admin：基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践github地址：https://gitee.com/mirrors/AntD-Admin演示地址：https://antd-admin.zuiidea.com (用户名和密码都是guest）在项目中引入 ant-designhttps://ant.design/index-cn...

react组件库：ant-design，antVAntD Admin：基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践github地址：https://gitee.com/mirrors/AntD-Admin演示地址：https://antd-admin.zuiidea.com (用户名和密码都是guest）一、路由hash路由：（推荐）localhost:3000/#/student (--后面有#号的)浏览器路由：l...

父子组件更改数据父组件修改子组件state(不建议)：父组件获取到子组件的实例（通过refs--(已被弃用)），通过子组件的setSate（）来更改子组件state父组件<Child ref="child"></Child>this.refs.child.setState({msg:'hello'})子组件改父组件state：父组件传递修改自己的setState函数给子组件调用父组件文件//父组件import React, { Comp

创建react项目在控制台全局下载create-react-app和yarn（ react项目推荐用yarn做包管理）npm i -g create-react-appnpm install -g yarn在文件夹下创建react项目create-react-app my-app创建好项目后，并启动cd testyarn start然后你就会看到react项目启动的页面！！！这些内容是怎么上去的呢？看看目录src下的App.js和index,js...

ReactReact是一个用于构建用户界面的 JAVASCRIPT 库。jsx语法在js中写HTML就是jsx语法jsx语法const temp = <h3>temp</h3>; //temp就是react元素jsx语法function MyCom(props){ // props是父组件给子组件传参存放的位置，是一个对象 // 变量渲染 let test = 'test1';...