金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 使用文档,的心路历程

使用文档,的心路历程

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:39

Dispatch 和 Commit

Redux 中的数据流十分严格且直接。组件会 dispatch action,而 action 由 action 的创建器函数返回。然后 reducer 会根据收到的 action 返回新的 state。最后,组件会通过 store 监听 state 的变化,并在 connect() 函数的帮助下访问state中的属性。

金沙棋牌官方平台 1

每个 action 都会通过 action 创建器。尽管理论上来说可以直接从组件中 dispatch 一个 action,但通常不这样做。action 的语法本身就鼓励我们将 action 的逻辑封装在 action 创建器函数中,即使是最简单的 action:

JavaScript

import { ADD_TODO, REMOVE_TODO } from '../actionTypes' function addTodo(text) { return { type: ADD_TODO, text } }

1
2
3
4
5
6
7
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

尽管 Vuex 的数据流很相似,但它并不严格要求组件与 state 交互的方式。首先,组件可以 dispatch action。这通常是一些异步动作,比如从后台获取数据等。之后,action 会 commit 一个 mutation。mutation 函数与 reducer 的相似之处就是,它是唯一能够改变 state 的东西。但还有另一种方法:组件可以直接 commit 一个 mutation,有时候跳过 action 直接修改数据是很方便的 。

金沙棋牌官方平台 2

从组件 commit mutation 的行为不仅没有被严格禁止,Vuex 的文档甚至鼓励在异步的情况下直接使用 action( React 的更严格的数据流,我更主张严格分离的概念——不管什么情况下,即使是同步或者非常简单的情况,commit mutation 也应该只能由 action 实施。

如果组件只能通过 action 来创建 mutation,那么组件和 mutation 之间就会有一个额外的层,保证组件和 mutation 之间的低耦合,最终使得代码更容易维护和修改。

Redux is a terribly simple library for state management, and has made working with React more manageable for everyone. 

          count this.$store.state.count

react父子组件传值

父组件传递给子组件

  // 父
  render(){
      return <Child msg={ this.state.msg }>
  }
  ...
  // 子
  render(){
      //接收
      return <p>{ this.props.msg }</p>
  }

子组件传给父组件

  // 父
      return <Child fn={ ()=>this.fn }>
  // 子
  componentDidMount(){
      // 通过调用父组件传递的函数,向其中传递子组件需要传递给父组件的参数,类似于jsonp技术,父组件相当于服务端
      this.props.fn( data )
  }

兄弟组件通信需要依赖于他们拥有的共同的父组件,父组件通过传给子组件1函数的形式获取子组件1要传给子组件2的data再在子组件2的template上通过props传给子组件2,达到兄弟同信的效果。

React 和 Angular 相似的地方

相比 React,Vue 有时更多地被拿来和 Angular 比较。实际上,浏览 Vue 模板时我们首先看到的就是双向绑定和 directive,与 Angular 非常类似:

<div id="app-3"> <span v-if="seen">Now you see me</span> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> <button v-on:click="reverseMessage">Reverse Message</button> </div>

1
2
3
4
5
6
7
8
9
10
11
<div id="app-3">
  <span v-if="seen">Now you see me</span>
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

尽管 Vue 支持 JSX,但通常的方法还是将模板和 JavaScript 分开。虽然React JSX 的语法很像原生语法,并且反映了通常的 JavaScript 语法,但 Vue 的模板语法非常高级,它包含 directive、快捷方式和条件渲染,使得 Vue 更像 Angular。不过,相似性也就到此为止了。

当然,前后端使用同一种模板可能会有很大好处(比如 node.js/Pug + Vue/Pug),而且尽管 Vue 提供的众多 directive 可能很有用,但对于我来说,从 React 的 JSX 切换到 Vue 的模板依然很痛苦。

However, there are a lot of cases where people blindly follow boilerplate code to integrate redux with their React application without understanding all the moving parts involved.

      为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。

回顾Vuex

核心内容

  1. store树存储所有module,state,getter,mutation,action,在index.js入口文件使用Vue.use(vuex),向根组件注入store树。
  2. mutation中可以对state进行一些简单的同步操作
  3. action中处理异步操作
  4. 只能通过dispatch(action)或者commit(mutation)来改变store树状态
  5. 提供mapGetters,mapMutations,mapStates,mapActions等辅助函数,方便各个组件混入状态
  6. 也是单向数据流

三年 React 开发经验的我,迁移到 Vue 的心路历程

2018/07/25 · JavaScript · React, Vue

原文出处: Anya Pavlova   译文出处:[csdn

  • 弯月]()   

金沙棋牌官方平台 3

前几年我一直在使用 React。最初仅有 React,后来使用 Redux 和 React 的其他库(react-router、react-redux、prop-types 等)配合使用。我喜欢 React 的简单和方便,使用 React 的时光一直都很快乐。我喜欢这个时代,有太多的好工具帮助我们更快更好地开发应用。

近三个月我在用 Vue 构建 Web 应用,在此我想分享一些我作为一名 React 拥护者的 Vue 使用经验。我不想写成一篇 Vue/React 比较的文章,这种文章太多了,包括官方的 Vue 文档(

如果你使用过 Vue 和 React,或者像我一样刚刚从 React 切换到 Vue 正在适应,或者只是想多一些了解,我希望这篇文章能对你有帮助。

然而,很多情况下,人们盲目遵循示例代码,将redux与其React应用程序集成在一起,而并不了解引入的所有组件。

            // 映射 this.count 为 store.state.count

接触Redux

结论

如开头所说,本文只是一些我在从 React 迁移到 Vue 时发现的一些最重要的问题。这并不是一篇严谨的比较,不能作为选择库的依据。但如果你也像我一样不得不从一个库切换到另一个库,或者只是想了解更多的关于两个库的信息,这篇文章也许会有帮助。

总结一下重点:

  • Vue 默认不包含 JSX,很强调脚本和模板分离;
  • Redux 和 Vuex 背后的数据流思想很相似;
  • Redux 十分依赖于 state 的不可改变性,而 Vuex 不关心 state 是否不可改变;
  • Vue 允许 dispatch,也允许直接从组件中 commit,但最好还是严格些,只允许 dispatch 会比较好;
  • 任何 Vue 组件都可以直接访问 store。

    1 赞 1 收藏 评论

金沙棋牌官方平台 4

· React and redux on their own (React和redux本身是独立的)

At this point it’s hard for some to believe, but redux and React are actually two separate libraries which can and have been used completely independent of each other. Lets take a look at redux’s state management flow :

在这一点上,它很难让人相信,但事实上这两个库的确都能独立使用。让我们花点时间看看redux状态管理流:

金沙棋牌官方平台 5

reudx状态管理流

If you have worked with redux before, you know that its functionality revolves around a “store”, which is where the state of the application lives. 

如果你以前用过redux,你应该知道它的功能围绕store,也就是应用程序状态保存的地方。

There is no way anyone can directly modify the store. The only way to do so is through reducers, and the only way to trigger reducers is to dispatch actions. So ultimately :

store是不能直接修改的。唯一只能通过reducers修改,而触发reducers要通过发送actions。总而言之:

* - To change data, we need to dispatch an action (要改变数据,我们只能通过发送action)*

On the other hand, when we want to retrieve data, we do not get it directly from the store. 

另一方面,当我们想去获取数据时,我们不能直接从store获得。

Instead, we get a snapshot of the data in the store at any point in time using store.getState(), which gives us the “state” of the application as on the time at which we called the getState method.

作为替代,我们能通过store的getState()方法得到store中任一时刻的数据,就像某一时刻定格的照片。当我们调用getState方法时,我们就能获得应用程序那个时刻的状态。总而言之:

 - To obtain data we need to get the current state of the store (要获取数据,我们就要获得store中当前的状态)

Now, let’s come to the (simplified) component structure of a standard react todo-mvc application:

现在,让我们来看看标准的react Todo-mvc应用结构:

金沙棋牌官方平台 6

标准的react Todo-mvc应用

            doneTodos: state => {

在react中的父子组件通信也类似于vue,甚至可以说一样[笑哭脸],同样当数据流十分复杂时,父子组件间的通信会非常得混乱和不直观,不宜于阅读和编写,所以才产生的redux。
  1. 同样的redux也是通过向根组件注入store来管理全局状态。
  2. 要使用Redux,首先在入口文件index.js引入至少两个东西,一个是redux中的createStore模块,还有一个自己写的reducer模块。通过createStore(reducer)来创建Store树。然后在根组件上注册。
  3. Redux默认只运行同步操作,如果有异步操作还需要使用redux提供的applyMiddleware中间件,并安装redux-thunk获取其中唯一的thunk模块,传入中间件,并将其写入createStore的第二个参数,使得此时的store树内的状态可以被异步更改了。
  4. 介绍一下reducer,自行编写的reducer导出两个东西,一个是reducer简历,reducer简历通过接受state和action两个参数,根据action.type来进行对state的更改,第二个就是许许多多的actions,可以类比于vuex中的mutation和action的结合体,action是函数,返回的对象包含了action的type和用于更改state的数据。这些actions需要通过dispatch(action())来触发。
  5. 然后,为了不在每个组件写入需要的store树,引入react-redux模块,其中的Provider在入口文件作为template包裹根结点,并传入store,从而达到注入的效果。
ReactDOM.render(
    // 提供provider函数,应用在最外层,传入store即可,所有的action也不用一个一个传进来了
    (<Provider store={store}>
        <App/>
    </Provider>),
    document.getElementById('root')
)
  1. 再然后,根组件的生成过程中引入react-redux的connect模块,connect模块接收两个函数作为参数,一个是mapStatetoProps,将store中的State属性混入props,一个是所需的actions对象的一个集合对象actionCreators。然后connect函数返回一个函数接受根组件为参数(装饰者模式),返回一个全新的App组件,从而在组件中只需简单地使用this.props.action就能触发store树的改变,通过this.props.stateName就能获取Store树的内容。
import { connect } from 'react-redux'
import { add,reduce,addSync } from './index.redux.js';

const mapStatetoProps = (state) => {
  return { num:state }
}
const actionCreators = { add,reduce,addSync }
class App extends React.component{...}
// 装饰App
App = connect(mapStatetoProps,actionCreators)(App)
// @connect(mapStatetoProps,actionCreators)和上面代码相同,但是需要引入plugins插件
export default App
  1. reducer组合,为了处理页面逻辑,一般每个页会单独写一个reducer,之后把所有的reducer整合在一起,通过redux的combineReducers函数组合所有的reducer,之后在根节点创建store时,通过改reducers创建,则每个组件都能通过this.props访问到所有的reducer中的state了。~~~
  2. ##### 通过reducers来修改状态,dispatch(action) [或者!!!] 触发整合后的action函数返回了reducers对象,都会触发reducer。

export reducer 因为要在reducer.js中整合所有的reducer
export actions 因为在组建中要使用并触发这些action


不过还是感觉vue写得舒服0 0
代表开发者谢谢二位
			  

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:使用文档,的心路历程

关键词:

上一篇:微信小程序开发05,30分钟从陌生到熟悉

下一篇:没有了