blog
blog copied to clipboard
yanyue404
Just blog and unjust blog.
## 介绍 Redux 是 JavaScript 状态容器， 试图让 state 的变化变得可预测。 ### 使用场景 - 用户的使用方式复杂 - 不同身份的用户有不同的使用方式（比如普通用户和管理员） - 多个用户之间可以协作 - 与服务器大量交互，或者使用了 WebSocket - View 要从多个来源获取数据 ## flux 架构 flux 的单向数据流图 ``` /*...
# React 内部是如何工作的 ? ## Virtual DOM ### 1. React 元素 在浏览器环境（宿主环境）中，一个 DOM 节点宿（宿主实例）是最小的构建单元。而在 React 中，最小的构建单元是 React 元素。 React 元素是一个普通的 JavaScript 对象。它用来描述 DOM 节点。 ```js // JSX 是用来描述这些对象的语法糖。 // {...
## 组件通信 在这里只讲 React 组件与组件本身的通信，组件通信主要分为三个部分： - 父组件向子组件通信：父组件向子组件传参或者是父组件调用子组件的方法 - 子组件向父组件通信：子组件向父组件传参或者是子组件调用父组件的方法 - 兄弟组件通信：兄弟组件之间相互传参或调用 建议不要有太深的的嵌套关系 ## 父传子 - 父组件向子组件传参 父组件向子组件参可以在子组件上绑定自定义属性，或者将父组件内部 state 的值进行绑定为子组件的属性值进行传递。 - 父组件调用子组件的方法 在子组件上绑定 ref 属性，并在子组件内部定义方法（可接受参数），在父组件内部使用`this.refs.自定义属性值.函数方法名`，进行调用，可传递参数。 - components/parentToChild/Parent.js ```js // 父组件 import...
## setState API 在 React 组件内部的 state 是可读可写的，当 state 发生改变的时候（使用 setState）会触发执行 render 方法，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式 调用 setState 其实是异步的 —— 不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前的 state 来计算出新的值，那你应该传递一个函数，而不是一个对象（详情见下文） ## setState 接受对象参数...
## 1.创建组件 ### React React 有两种类型的组件，分别是 functional component, class component，所以有两种定义方式: **functional component** ```js function Test(props) { return {props.name}; } ``` **class component** ```js class Test extends React.Component() { constructor(props) {...
## Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 1. 状态共享，非父子组件通信 2. 数据快照，缓存数据，避免重复请求，影响用户体验 3. dev 环境下 time-travel 调试 ## 实现模式 利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新 **流程解读** [](https://camo.githubusercontent.com/f4571e3be6d6661522cc57debd05970628cee5ba7a251e1c9bf7a9f852a00361/68747470733a2f2f767565782e7675656a732e6f72672f767565782e706e67)...
## 前言 最新 React 版本为 `v16.11.0`，由于 16 版本的 React 的有巨大的改变更新，此篇文章做总结性的纪录。 - [CHANGELOG.md](https://github.com/facebook/react/blob/master/CHANGELOG.md) - [React v16.9.0 发布及 Roadmap 最新进展](https://zh-hans.reactjs.org/blog/2019/08/08/react-v16.9.0.html) ### 概述 - 采用 Fiber diff 更新机制，生命周期重大变化 - Suspense 代码分片 - Hook...
## 前言 最近工作中使用的 vue，自己也 fork 了一份 [vue 源码](https://github.com/yanyue404/vue) ，刚起步在学习。 做了下面的题目，得到了 50 分，同时了解了一些在 vue 源码学习的注意点。 继续探索吧，Rainbow ! ## 题目 1、Vue 实例的 data 属性，可以在哪些生命周期中获取到？ 【多选题】 - A. beforeCreate - B. created -...
### 1.UI组件和container组件 UI组件是构成前端界面的基础单元，它们不涉及业务逻辑，无生命周期函数，只负责单纯的渲染，所有数据都通过 props 传入。 **UI组件分为两种情况，有状态组件和无状态组件:** - 如果是无状态组件，则使用纯函数，我们大部分的UI组件都是这种纯函数。 ````js // bad (relying on function name inference is discouraged) const Listing = ({ hello }) => ( {hello} ); // good...
## 前言 本文纪录 Javascript 正则表达式的语法学习实践。 正则常见使用场景： - 数据验证，例如检查时间字符串是否符合格式； - 数据抓取，以特定顺序抓取包含特定文本或内容的网页； - 数据包装，将数据从某种原格式转换为另外一种格式； - 字符串解析，例如捕获所拥有 URL 的 GET 参数，或捕获一组圆括弧内的文本； - 字符串替代，将字符串中的某个字符替换为其它字符。 在线工具辅助学习： - https://regex101.com/ - https://jex.im/regulex/ ## 使用规则说明 ### 基本语句 正则表达式（可叫作...