随笔分类 - React
摘要：react在做大型项目的时候，前端的数据一般会越来越复杂，状态的变化难以跟踪、无法预测，而redux可以很好的结合react使用，保证数据的单向流动，可以很好的管理整个项目的状态，但是具体来说，下面是redux的一个核心流程图： 即整个项目的数据存储在Store中，每个状态下Store会生成一个st
阅读全文
摘要：React本身就非常关注性能，其提供的虚拟DOM搭配上DIff算法，实现对DOM操作最小粒度的改变也是非常高效的，然而其组件的渲染机制，也决定了在对组件更新时还可以进行更细致的优化。 react组件渲染 在讲react生命周期时，就谈到过react组件分为了初始化渲染和更新渲染， 初始化渲染会调用根
阅读全文
摘要：https://tech.meituan.com/redux-design-code.html
阅读全文
摘要：文章结构： React中的虚拟DOM是什么？ 虚拟DOM的简单实现（diff算法） 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么？ 虽然React中的虚拟DOM很好用，但是这是一个无心插柳的结果。 React的核心思想：一个Compon
阅读全文
摘要：React组件的生命周期 在用es6写组件时，一般使用class来表示的，即 class Todos extends React.Component {}。 与生命周期有关的函数： consctructor 构造函数，在创建组件的时候调用。 componentWillMount 在组件将要挂载之前调
阅读全文
摘要：在vue中型项目开发的过程中，一般都是要用到vuex这个状态管理工具的，这样可以方便我们管理全局的状态，同时，为了在开发的过程中，更加方便地实时查看到state状态，我们会使用 vue-devtool 工具，这样就可以在浏览器中实时看到 state 的变化以及触发的 mutations 等等。 在r
阅读全文
摘要：前面的两篇文章我们认识了 Redux 的相关知识以及解决了如何使用异步的action，基础知识已经介绍完毕，接下来，我们就可以在React中使用Redux了。 由于Redux只是一个状态管理工具，不针对任何框架，所以直接使用Redux做React项目是比较麻烦的，为了方便Redux结合React使用
阅读全文
摘要：你为什么需要异步操作？ https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux 在redux基础篇的介绍中，我们介绍了redux的基本概念， 对于state的改变有了
阅读全文
摘要：这一部分仅仅介绍react基本的概念，因为react不仅仅可以用在react中，还可以用在其他框架甚至原生 js 中。 所以这里只介绍通用的概念。 redux使用场景 redux和vue中的vuex是类似的，他们的使用都是为了使得组件之间数据的通信和实现良好的代码结构。 但并不是说做react的项目
阅读全文
摘要：官方文档：https://react-guide.github.io/react-router-cn/docs/guides/advanced/NavigatingOutsideOfComponents.html (强烈推荐) react-router入门可以看阮一峰老师的文章： http://ww
阅读全文
摘要：React条件性渲染的方式和Vue是不同的，之前用vue做项目时觉得vue是在是强大，通过v-if就可以选择性的渲染组件，另外，对于列表的渲染更是方便，一个v-for就可以进行快速的渲染，但是React无论在条件性渲染还是列表渲染，我觉得都非常的麻烦。 发点牢骚~ 也许后面可以体会到React的强大
阅读全文
摘要：推荐文章： https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有： 1、function 方式 2、class App extends React.component {} 3. React.creatClass 大致区别： functio
阅读全文
摘要：拿到一个项目，我们应该如何去完成这个项目呢。 是直接上手？ 还是先进行分析，然后再去解决呢？毫无疑问，如果直接上手解决，那么可能会因为知道目标所在，而导致出现各种问题。 所以，我们应该系统的分析这个项目，然后再去完成。 第一步： 需求 服务器端使用nodejs 可以加入现有的房间 可以创建新的房间
阅读全文
摘要：第一部分： 前言 推荐网站： https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具，它提供了一致的设计方便我们快速开发和减少不必要的设计与代码，很多实用react框架的开发者都已经在使用ant.desi
阅读全文
摘要：在react&webpack项目中需要引入图片，但是webpack使用的模块化的思想，如果不进行任何配置，而直接在jsx或者是css中使用相对路径来使用就会出现问题，在webpack中提供了url可以很好的解决这个问题。在stackoverflow上对此问题也进行了详细的描述。 通过安装url-lo
阅读全文
摘要：在webpack-react项目中，css的使用对于不同人有不同的选择，早起是推荐在jsx文件中使用 css inline js的，但是这种方法要写很多对象来表示一个一个的标签，并且对于这些对象，我们在写样式时，还必须要使用驼峰式的写法，所以，这无疑使我们不能接受的，最好的做法就是讲css文件写在一
阅读全文
摘要：第一部分：表单基础 在React中，修改表单的唯一途径是使用setState方法。举例如下： 在codepen的运行代码连接 我们可以看出其运行逻辑：首先将组建渲染到页面，及执行了render(),此时获取的value为空，当我们输入数据时，触发handleChange函数（注意：要提前绑定在当前环
阅读全文
摘要：1.写组件时，最好将一个大的组件分解成多个小的组件。 通过React写组件时，应当尽可能地将组件分为更小的更多的组件，然后再复合组件。 比如下面的评论组件就是一个组件，一个庞大的组件，这时我们还没有将之分解，更没有复合： 这个组件要接受一个author(对象)、一个text（字符串）和一个data(
阅读全文
摘要：使用webpack webpack是一款模块化的打包工具，它认为所有的文件都是模块，包括js，css等等，版本为2.x推荐学习，1.x版本已废弃，不建议使用。 目前，facebook官方就是使用webpack搭建react的开发环境，关于webpack的详尽知识可以在webpack官网学习。这里将介
阅读全文
浙公网安备 33010602011771号