通过 React + Mobx 实现简单的 TodoList

philadelphia 发布于2019-08-20 16:48 / 834人阅读

摘要：子组件中通过就可以拿到上的数据了，实现了从父组件子组件的数据传递。当前状态改变时要发生的副作用。通过装饰器调用的函数进行使用。理想情况下，大部分组件都应该是无状态组件，仅通过获得数据。通过调用中的改变状态。

Todo-list

这是一个用来初步了解如何通过 React + Mobx 构建应用的 DEMO，通过 Webpack 进行打包。
技术栈： React + Mobx + React-Mobx + SCSS。
由于刚接触 React 不久，写的不好或者有误还请指出，万分感谢。

React

React 是一个用于构建用户界面的 JavaScript 框架，也就是说 React 是一个 UI 框架，他把重点放在了 MVC 中的 V(View) 层上。

声明组件

React 可以通过 ES6 的 class 来声明一个自定义组件，该组件继承基类 React.Component 的所有属性和方法。

class MyComponent extends React.Component {
  render () {
    return (
      // jsx
    )
  }
}

这里有几点要强调的地方：

1.原生 HTML 标签以小写开头，自定义 React 组件的首字母要大写。

2.JSX 语法很类似 XML，它不是必须的，但我觉得用它来编程很方便。

3.组件内的 render 函数是必须的，它返回一颗组件树，最终会被渲染成 HTML。

挂载虚拟 DOM

实例化根组件，启动框架，将虚拟的 DOM 节点挂载到真实的 DOM 节点。

ReactDOM.render(jsx, DOM)

React 组件的状态

class MyComponent extends React.Component {
  constructor (...arg) {
    super(...arg)
    // 定义组件的初始状态
    this.state = {
      //...
      name: "Couzin"
    }
  }
  handlerClick () {
    // 调用后触发重新渲染
    this.setState = {
      name: "HUnter"
    }
  }
  render () {
    return (
      
        
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      
        {this.props.author}
      
    )
  }
}

子组件中通过 this.props 就可以拿到 props 上的数据了，实现了从父组件 ------> 子组件的数据传递。
另外再提及一下 this.props.children：

class Father extends React.Component {
  render () {
    return (
      
        {/* ... */}
        
          hello world
        
      
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      
        {this.props.author}
        {this.props.children}
        {/* 相当于hello world */}
      
    )
  }
}

也就是说 this.props.children 就是组件内嵌套的元素。

了解了上面的这些使用方法，差不多就可以开始简单的使用 React 了。

Mobx

Mobx 是一个状态管理工具，它可以把你的应用变为响应式。
Mobx 提供状态给 React 使用，下面有一些概念

observable state （可观察状态）

Mobx 为现有数据结构添加了可观察的功能，只需要通过 @observable 这个装饰器就可以使你的属性变为可观察的。

class MyStore {
  @observable myName = "hunter"
}

derivation （衍生）

任何源自 state 并且不会再有进一步相互作用的东西就是衍生。Mobx 有两种类型的衍生：

computed values 从当前可观察状态中衍生出的值。

reactions 当前状态改变时要发生的副作用。

computed values

当相关数据变化时会自动更新。通过 @computed 装饰器调用的 setter／getter 函数进行使用。

class MyStore {
  @observable myName = "HUnter"

  @computed get getNameLength () {
    return this.myName.length
  }
}

reactions

reactions 与 computed values 相比起来使用较少，它是当前状态改变所触发的副作用。

actions （动作）

只有在 actions 中，才可以修改 Mobx 中 state 的值。注意当你使用装饰器模式时，@action 中的 this 没有绑定在当前这个实例上，要用过 @action.bound 来绑定使得 this 绑定在实例对象上。

@action.bound setName () {
  this.myName = "HUnter"
}

actions ------> state ------> view

Mobx-React

上面简单介绍了 Mobx 的使用，我们知道当 React 组件中 state 变化后，要通过 setState 来触发视图的更新，Mobx 中定义了 React 组件中的 state 以及如何修改 state，那么怎么在 state 改变后触发视图的更新呢？Mobx-React 提供了 observer 将 React 组件的转变为响应式组件，确保 state 改变时可以强制刷新组件。做法很简单：

@observer
class MyComponent extends React.Component {
  // ...
}

React + Mobx 使用的步骤

1.定义 observable state

class Store {
  @observable data = []

  // @computed ...

  // @action ...
}

2.创建视图
通过 React 创建视图时，推荐创建无状态组件，即组件内没有内部的 state 和生命周期函数。理想情况下，大部分组件都应该是无状态组件，仅通过 props 获得数据。

@observer
class MyComponent extends React.Component {

}

3.通过调用 Mobx 中的 actions 改变状态。

@observer
class MyComponent extends React.Component {
  render () {
    let store = { this.props }
    return (
      
         
      
    )
  }
}

上面大致讲了如何简单使用 React + Mobx 来实现一个简单的应用，描述的比较浅显。具体源码请见 github。

GPU云服务器云服务器 js实现的简单特效用c实现简单的shell java实现简单的web服务器 react实现轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83166.html

MobX入门TodoList

摘要：用于简单可扩展的状态管理，相比有更高的灵活性，文档参考中文文档，本文作为入门，介绍一个简单的项目。任务已完成下一个任务修复谷歌浏览器页面显示问题提交意见反馈代码创建在中引入主入口文件设置参考入门学习总结 MobX用于简单、可扩展的React状态管理，相比Redux有更高的灵活性，文档参考：MobX中文文档，本文作为入门，介绍一个简单的TodoList项目。 1. 预期效果 showIm...

csRyan 2019-08-26 10:26 评论0 收藏0
React+TypeScript+Mobx+AntDesignMobile进行移动端项目搭建

摘要：通过装饰器或者利用时调用的函数来进行使用下面代码中当或者发生变化时，会监听数据变化确保通过触发方法自动更新。只能影响正在运行的函数，而无法影响当前函数调用的异步操作参考官方文档用法装饰器函数遵循中标准的绑定规则。前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技术栈,使用Create-React-App脚手架进行一个移动端项目搭建，主要介绍项...

lindroid 2019-08-23 18:24 评论0 收藏0
利用Dawn工程化工具实践MobX数据流管理方案

摘要：新的项目目录设计如下放置静态文件业务组件入口文件数据模型定义数据定义工具函数其中数据流实践的核心概念就是数据模型和数据储存。最后再吃我一发安利是阿里云业务运营事业部前端团队开源的前端构建和工程化工具。本文首发于阿里云前端dawn团队专栏。项目在最初应用 MobX 时，对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案，通过对MobX官方文档中针对大型可维护项目最佳实践的...

0x584a 2019-08-21 17:19 评论0 收藏0
react+mobx+thrift学习demo

摘要：安装等相关依赖。通过启动项目，进行后续操作。自定义执行状态的改变。任何不在使用状态的计算值将不会更新，直到需要它进行副作用操作时。强烈建议始终抛出错误，以便保留原始堆栈跟踪。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 写法 step 2 mobx 了解&使用 step 3 thrift接口调用过程 Re...

xcc3641 2019-08-23 11:44 评论0 收藏0
React全家桶环境搭建过程

摘要：环境搭建从零开始搭建开发环境引入安装依赖新建修改引入并支持安装依赖打包时将样式模块化，我们可以通过或引入样式，并且相互不冲突。修改，引入创建使用语法报错修改引入状态管理使用装饰器语法修改修改源码环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-domnpm i -...

Genng 2019-08-22 17:20 评论0 收藏0