-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
125 lines (58 loc) · 35.7 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>redux与react-redux的区别</title>
<link href="/bamboo.gitup.io/2021/07/15/redux-yu-react-redux-de-qu-bie/"/>
<url>/bamboo.gitup.io/2021/07/15/redux-yu-react-redux-de-qu-bie/</url>
<content type="html"><![CDATA[<hr><h4 id="redux简介："><a href="#redux简介：" class="headerlink" title="redux简介："></a><strong>redux简介：</strong></h4><p>redux是react中进行state状态管理的JS库（并不是react插件），一般是管理多个组件中<strong>共享数据状态</strong>。这个是和Vuex是一样的 ， 只不过redux是完全独立的</p><h4 id="Redux三大基础原则："><a href="#Redux三大基础原则：" class="headerlink" title="Redux三大基础原则："></a>Redux三大基础原则：</h4><p><strong>唯一数据源</strong>：</p><p>唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。这个唯一Store上的状态，是一个树形的对象，每个组件往往只是用树形对象上一部分的数据。</p><p><strong>保持状态只读</strong>：</p><p>保持状态只读，就是说不能去直接修改状态，要修改Store的状态，必须要通过派发一个action对象完成。改变状态的方法不是去修改状态上值，而是创建一个新的状态对象返回给Redux，由Redux完成新的状态的组装。</p><p><strong>数据改变只能通过纯函数完成</strong>：</p><p>这里所说的纯函数就是Reducer, Redux这个名字的前三个字母Red代表的就是Reducer</p><p>Redux名字的含义是Reducer+Flux（<a href="https://www.npmjs.com/package/flux">用于React的数据流架构</a>）</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">reducer(state,action)</span><br></pre></td></tr></table></figure><p>第一个参数state是当前的状态，第二个参数action是接收到的action对象，而<strong>reducer函数要做的事情，就是根据state和action的值产生一个新的对象返回</strong>，注意reducer必须是纯函数，也就是说函数的返回结果必须完全由参数state和action决定，而且不产生任何副作用，也不能修改参数state和action对象</p><p><strong>Redux库提供的createStore函数</strong>：第一个参数代表更新状态的reducer，第二个参数是状态的初始值，第三个参数可选，代表StoreEnhancer(增强器)。状态通过getStore()获取</p><p>redux和组件进行对接的时候是直接在组件中进行创建</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = createtore(rootReducer)</span><br><span class="line">store.subscribe(<span class="function">()=></span><span class="built_in">console</span>.log(<span class="string">"state"</span>,store.getState()))</span><br></pre></td></tr></table></figure><h4 id="react-redux简介："><a href="#react-redux简介：" class="headerlink" title="react-redux简介："></a><strong>react-redux简介：</strong></h4><p><code>React-Redux</code>是<code>Redux</code>的官方<code>React</code>绑定库。它能够使你的<code>React</code>组件从<code>Redux store</code>中读取数据，并且向<code>store</code>分发<code>actions</code>以更新数据。</p><p><strong>react-redux是运用Provider将组件和store对接</strong>，使在Provider里的所有组件都能共享store里的数据，还要使用<strong>connect将组件和react连接</strong>。</p><p><strong>react-redux获取state</strong>是通过mapStateToProps函数，只要state数据变化就能获取最新数据</p><p><strong>react-redux是使用mapDispathToProps函数</strong>然后在调用dispatch进行触发</p>]]></content>
</entry>
<entry>
<title>Component和PureComponent的区别</title>
<link href="/bamboo.gitup.io/2021/07/13/component-he-purecomponent-de-qu-bie/"/>
<url>/bamboo.gitup.io/2021/07/13/component-he-purecomponent-de-qu-bie/</url>
<content type="html"><![CDATA[<hr><h2 id="Component和PureComponent的区别"><a href="#Component和PureComponent的区别" class="headerlink" title="Component和PureComponent的区别"></a>Component和PureComponent的区别</h2><p>React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()</p><h5 id="区别点"><a href="#区别点" class="headerlink" title="区别点"></a>区别点</h5><p>PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate()，而Component没有</p><h4 id="PureComponent缺点"><a href="#PureComponent缺点" class="headerlink" title="PureComponent缺点"></a>PureComponent缺点</h4><p>可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。</p><h4 id="PureComponent优势"><a href="#PureComponent优势" class="headerlink" title="PureComponent优势"></a>PureComponent优势</h4><p>不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。</p><h4 id="PureComponent-有时会因深层的数据不一致而不更新"><a href="#PureComponent-有时会因深层的数据不一致而不更新" class="headerlink" title="PureComponent 有时会因深层的数据不一致而不更新"></a>PureComponent 有时会因深层的数据不一致而不更新</h4><p>JavaScript 中的对象一般是可变的（Mutable） 会影响原数据 这种情况可以使用深浅拷贝 </p><p>或者Immutable.js （数据持久化解决）</p>]]></content>
</entry>
<entry>
<title>useContext</title>
<link href="/bamboo.gitup.io/2021/07/13/usecontext-de-ying-yong-chang-jing/"/>
<url>/bamboo.gitup.io/2021/07/13/usecontext-de-ying-yong-chang-jing/</url>
<content type="html"><![CDATA[<hr><h3 id="React的useContext应用场景："><a href="#React的useContext应用场景：" class="headerlink" title="React的useContext应用场景："></a>React的useContext应用场景：</h3><p> 如果需要在组件之间共享状态，可以使用useContext() </p><p> 现在有俩个组件Lu和Yao，我们希望它们之间共享状态。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><div className=<span class="string">"test"</span>></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">Lu</span> /></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">Yao</span> /></span></span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h4 id="在它们的父组件上使用React的Context-API，在组件外部建立一个Context"><a href="#在它们的父组件上使用React的Context-API，在组件外部建立一个Context" class="headerlink" title="在它们的父组件上使用React的Context API，在组件外部建立一个Context"></a>在它们的父组件上使用React的Context API，在组件外部建立一个Context</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { useContext } <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">"react-dom"</span>;</span><br><span class="line"> <span class="keyword">const</span> TestContext = React.createContext({});</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">TestContext.Provider</span> </span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="attr">value</span>=<span class="string">{{</span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="attr">username:</span> '<span class="attr">Lu</span> <span class="attr">Yao</span>',</span></span></span><br><span class="line"><span class="tag"><span class="xml">}}</span></span></span><br><span class="line"><span class="tag"><span class="xml">></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"test"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">Lu</span> /></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">Yao</span> /></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">TestContext.Provider</span>/></span></span></span><br><span class="line"><span class="xml"> );</span></span><br><span class="line"><span class="xml">}</span></span><br></pre></td></tr></table></figure><h4 id="子组件调用"><a href="#子组件调用" class="headerlink" title="子组件调用"></a>子组件调用</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Navbar = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> { username } = useContext(TestContext)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"Lu"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>{username}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> )</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//messages 同理</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Messages = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> { username } = useContext(TestContext)</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">className</span>=<span class="string">"Yao"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>1 message for {username}<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> )</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>useState 和 this.state的区别</title>
<link href="/bamboo.gitup.io/2021/07/13/usestate-he-this.state-de-qu-bie/"/>
<url>/bamboo.gitup.io/2021/07/13/usestate-he-this.state-de-qu-bie/</url>
<content type="html"><![CDATA[<hr><h4 id="useState内部基于-useReducer-实现，方法返回-state-本身以及一个修改-state-的方法"><a href="#useState内部基于-useReducer-实现，方法返回-state-本身以及一个修改-state-的方法" class="headerlink" title="useState内部基于 useReducer` 实现，方法返回 state 本身以及一个修改 state 的方法."></a>useState<code>内部基于 </code>useReducer` 实现，方法返回 state 本身以及一个修改 state 的方法.</h4><ol><li>通过 <code>setXXX</code> 修改数据，不会和 this.setState 一样进行对象属性合并，会直接覆盖.</li><li>Hooks 函数组件中，存在<code>渲染闭包</code>的概念，在一次渲染闭包中，state 是固定不变的.</li><li>Hooks 函数组件，默认开启 类 Object.is 的浅层比较，类似默认开启 PureComponent 的优化方式。</li></ol>]]></content>
</entry>
<entry>
<title>useEffect和componentDidmount的区别</title>
<link href="/bamboo.gitup.io/2021/07/13/useeffect-he-componentdidmount-de-qu-bie/"/>
<url>/bamboo.gitup.io/2021/07/13/useeffect-he-componentdidmount-de-qu-bie/</url>
<content type="html"><![CDATA[<h2 id="在调用-this-setstate时"><a href="#在调用-this-setstate时" class="headerlink" title="在调用 this.setstate时"></a>在调用 this.setstate时</h2><p> render阶段(会计算出状态变化) 通过一种为effect/flags的数据结构 传递一条包含了不同fiber节点的effect链表 传给commit阶段 接着 commit阶段（会将Effect渲染在视图中） </p><h3 id="effect"><a href="#effect" class="headerlink" title="effect"></a>effect</h3><p>如果是要插入DOM元素 会给对应的Fiber 添加Placement 的 effect</p><p>如果是要更新DOM元素 会给对应的Fiber 添加Update 的 effect</p><p>如果是要删除DOM元素 会给对应的Fiber 添加Deletion 的 effect</p><p>如果是要更新Ref属性的DOM 会给对应的Fiber 添加Ref 的 effect</p><p>如果是包含useEfect的回调执行的Fiber来说 会在对应的fiber上添加Passive</p><p>所以与视图相关的操作都会有相应的effect</p><h2 id="useEffect"><a href="#useEffect" class="headerlink" title="useEffect()"></a>useEffect()</h2><p>如果 useEffect(fn) 他会在mount时以及update时创建对应的 Passive effect<br> 如果一个函数组件使用了无参数的useEffect 那么每次render时都会创建一个Passive effect</p><p>如果 useEffect(fn,[]) 他会在mount时创建对应的 Passive effect </p><p>如果 useEffect(fn,[dep]) 他会在mount时以及依赖项变化时 创建对应的 Passive effect </p><p>classComponent(类组件) 在 mount时创建Placement 的 effect </p><h3 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h3><p>commit 阶段 可以分为三个阶段<br> 1.渲染试图前 / beforeMutation阶段<br> 2.渲染视图 / mutation 阶段<br> 3.渲染视图后 / layout阶段</p><p>对于Placement effect 来说 会在 mutation阶段 进行 appenChild layout阶段 同步调用componentDidMount</p><p>对于 Passive effect来说 会在 三个子阶段 执行完成 异步调用useEffect 回调函数 </p><h2 id="useLayoutEffect-fn"><a href="#useLayoutEffect-fn" class="headerlink" title="useLayoutEffect(fn,[])"></a>useLayoutEffect(fn,[])</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ useLayoutEffect(fn,[]) // 在<span class="keyword">function</span>组件中 进行同步渲染</span><br></pre></td></tr></table></figure>]]></content>
</entry>
<entry>
<title>redux中间件（持续更新中）</title>
<link href="/bamboo.gitup.io/2021/02/15/redux-zhong-jian-jian/"/>
<url>/bamboo.gitup.io/2021/02/15/redux-zhong-jian-jian/</url>
<content type="html"><![CDATA[<hr><h3 id="1-redux-thunk"><a href="#1-redux-thunk" class="headerlink" title="1.redux-thunk"></a>1.redux-thunk</h3><p> redux-thunk是作为redux的 middleware 存在的，用法和普通 middleware 的用法是一样的，注册 middleware 的代码如下：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> thunkMiddleware <span class="keyword">from</span> <span class="string">'redux-thunk'</span></span><br><span class="line"><span class="keyword">const</span> store = createStore(reducer, applyMiddleware(thunkMiddleware))</span><br></pre></td></tr></table></figure><p>redux-thunk主要的功能就是可以让我们dispatch一个函数，而不只是普通的 Object</p><p>原理：核心代码其实只有两行，就是判断每个经过它的action：如果是function类型，就调用这个function（并传入 dispatch 和 getState 及 extraArgument 为参数），而不是任由让它到达 reducer，因为 reducer 是个纯函数，Redux 规定到达 reducer 的 action 必须是一个 plain object 类型。</p><h5 id="示例代码："><a href="#示例代码：" class="headerlink" title="示例代码："></a>示例代码：</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> login = <span class="function">(<span class="params">userName</span>) =></span> <span class="function">(<span class="params">dispatch</span>) =></span> {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'loginStart'</span> })</span><br><span class="line"> request.post(<span class="string">'/api/login'</span>, { <span class="attr">data</span>: userName }, <span class="function">() =></span> {</span><br><span class="line"> dispatch({ <span class="attr">type</span>: <span class="string">'loginSuccess'</span>, <span class="attr">payload</span>: userName })</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line">store.dispatch(login(<span class="string">'Lucy'</span>))</span><br></pre></td></tr></table></figure><h3 id="2-redux-saga"><a href="#2-redux-saga" class="headerlink" title="2.redux-saga:"></a>2.redux-saga:</h3><p>基于 es6 Generator语法，将异步操作逻辑存放在一个地方进行集中处理，通过 yield 关键字，可以让函数的执行流挂起。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sagaMiddleware = createSagaMiddleware();</span><br><span class="line"><span class="keyword">const</span> middlewares = [sagaMiddleware];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = createStore(appReducer, applyMiddleware(...middlewares));</span><br><span class="line">sagaMiddleware.run(rootSaga);</span><br></pre></td></tr></table></figure><p>监听被dispatch的actions，当接收到action或者知道其被触发时，调用worker saga执行任务</p><p><strong>原理：</strong></p><p>redux-saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action，然后可以派生一个新的任务对state进行维护（这个看项目本身的需求），通过更改的state驱动View的变更</p><p><strong>generator</strong></p><p>generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次</p><p>示例：</p><p>普通函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">x</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> x + x;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> r = foo(<span class="number">1</span>); <span class="comment">// 调用foo函数</span></span><br></pre></td></tr></table></figure><p><strong>generator</strong>:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">foo</span>(<span class="params">x</span>) </span>{</span><br><span class="line"> <span class="keyword">yield</span> x + <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">yield</span> x + <span class="number">2</span>;</span><br><span class="line"> <span class="keyword">return</span> x + <span class="number">3</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>generator和函数不同的是，generator由<code>function*</code>定义（注意多出的<code>*</code>号），并且，除了<code>return</code>语句，还可以用<code>yield</code>返回多次。</p><hr><h3 id="3-redux-promise"><a href="#3-redux-promise" class="headerlink" title="3.redux-promise:"></a>3.redux-promise:</h3><p>使用redux-promise中间件，允许action是一个promise</p><p><strong>源码：</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> isPromise <span class="keyword">from</span> <span class="string">'is-promise'</span>;</span><br><span class="line"><span class="keyword">import</span> { isFSA } <span class="keyword">from</span> <span class="string">'flux-standard-action'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">promiseMiddleware</span>(<span class="params">{ dispatch }</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">next</span> =></span> <span class="function"><span class="params">action</span> =></span> {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 判断是不是标准的FSA</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="keyword">if</span> (!isFSA(action)) {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 判断是不是promise,</span></span><br><span class="line"><span class="comment"> * 如果是则执行，只会处理resolve的值，</span></span><br><span class="line"><span class="comment"> * 反之交给下一个中间件</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="keyword">return</span> isPromise(action) ? action.then(dispatch) : next(action);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 是标准的FSA, 判断是不是一个promise</span></span><br><span class="line"> <span class="keyword">return</span> isPromise(action.payload)</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 1.promise的时候，执行then,同时捕获异常，</span></span><br><span class="line"><span class="comment"> * 在处理这两种情况以后，会分别添加另外一个约束error</span></span><br><span class="line"><span class="comment"> * 这我们需要在reducer里面还需要判断error的值，</span></span><br><span class="line"><span class="comment"> * 做不同的处理</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 2. 如果不是promise则交给下一个中间件</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * */</span></span><br><span class="line"> ? action.payload</span><br><span class="line"> .then(<span class="function"><span class="params">result</span> =></span> dispatch({ ...action, <span class="attr">payload</span>: result }))</span><br><span class="line"> .catch(<span class="function"><span class="params">error</span> =></span> {</span><br><span class="line"> dispatch({ ...action, <span class="attr">payload</span>: error, <span class="attr">error</span>: <span class="literal">true</span> });</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line"> })</span><br><span class="line"> : next(action);</span><br><span class="line"> };</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>原理</strong>：如果action是一个promise，则会等待promise完成，将完成的结果作为action触发，如果action不是一个promise，则判断其payload是否是一个promise，如果是，等待promise完成，然后将得到的结果作为payload的值触发。</p><p><strong>使用方法：</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">const</span> testRes = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =></span> {</span><br><span class="line"> res({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'TEST_RESOLVE'</span></span><br><span class="line"> })</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> store.dispatch(testRes());<span class="comment">//会直接dipatch</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> testRej = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =></span> {</span><br><span class="line"> rej({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'TEST_REJECT'</span></span><br><span class="line"> })</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> store.dispatch(testRes());<span class="comment">// 不会有任何操作</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//action.then只接收了一个函数，所以不会处理reject的值</span></span><br><span class="line"><span class="comment">//中间件内部是会自动地帮我们调用dispatch</span></span><br><span class="line"><span class="comment">//resolve的值会被当做diapatch的参数被重新分发</span></span><br><span class="line"><span class="comment">//resolve的值并不会继续流转到交给下一个中间件了</span></span><br></pre></td></tr></table></figure><p>当<code>promise</code>的状态变成<code>resolved</code>的时候回进入<code>then</code>里面，并且重新<code>dispatch(action)</code></p><p>当<code>promise</code>的状态变成<code>rejected</code>的时候回进入<code>catch</code>里面，并且重新<code>dispatch(action)</code>, 同时会在<code>action</code>里面加一个<code>error</code></p>]]></content>
</entry>
<entry>
<title>Lodash 中文文档</title>
<link href="/bamboo.gitup.io/2021/02/15/lodash-zhong-wen-wen-dang/"/>
<url>/bamboo.gitup.io/2021/02/15/lodash-zhong-wen-wen-dang/</url>
<content type="html"><![CDATA[<hr><h4 id="Lodash-中文文档"><a href="#Lodash-中文文档" class="headerlink" title="Lodash 中文文档"></a>Lodash 中文文档</h4><h5 id="文档地址："><a href="#文档地址：" class="headerlink" title="文档地址："></a>文档地址：<a href="https://www.lodashjs.com/"></a></h5><p>Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库</p><p>Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：</p><ul><li>遍历 array、object 和 string</li><li>对值进行操作和检测</li><li>创建符合功能的函数</li></ul>]]></content>
</entry>
<entry>
<title>Hexo主题--Bamboo介绍</title>
<link href="/bamboo.gitup.io/2020/09/14/hello-world/"/>
<url>/bamboo.gitup.io/2020/09/14/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> hexo-theme-bamboo </tag>
</tags>
</entry>
</search>