经由过程 React + Mobx 完成简朴的 TodoList

2024年1月13日 273次阅读 来源: Hunter_Gu

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 (
      <div>
        <button
          onClick="this.handlerClick.bind(this)
        >click</button>
      </div>
    )
  }
}

state 是组件私有的，能够经由过程 setState 来修正 state，而且触发 View 的从新衬着。

通报 props

当一个组件依靠父组件中的数据时，就需要用 props 来通报数据了。

class Father extends React.Component {
  render () {
    return (
      <div>
        {/* ... */}
        <Child author="HUnter" />
      </div>
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      <div>
        <p>{this.props.author}</p>
      </div>
    )
  }
}

子组件中经由过程 this.props 就能够拿到 props 上的数据了，完成了从 父组件 ——> 子组件的数据通报。
别的再说起一下 this.props.children：

class Father extends React.Component {
  render () {
    return (
      <div>
        {/* ... */}
        <Child author="HUnter">
          <h1>hello world</h1>
        </Child>
      </div>
    )
  }
}
class Child extends React.Component {
  render () {
    return (
      <div>
        <p>{this.props.author}</p>
        {this.props.children}
        {/* 相当于<h1>hello world</h1> */}
      </div>
    )
  }
}

也就是说 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 (
      <div>
        <input onChange={store.setName} /> 
      </div>
    )
  }
}

上面大抵讲了怎样简朴运用 React + Mobx 来完成一个简朴的运用，形貌的比较浅易。详细源码请见 github。

    原文作者：Hunter_Gu
    原文地址: https://segmentfault.com/a/1190000009547437
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞