大前端 - react -Mobx6（数据流）

已于 2023-01-10 21:48:11 修改
阅读量1.1k 收藏 4
点赞数 1
分类专栏： 大前端学习 文章标签： react.js
于 2021-09-16 23:04:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38245947/article/details/120338996
版权

代码地址：

1.mobx概述

mobx是什么？mobox是状态管理库。和redux做的事情一样，但是比redux简单。
没有那么多的模版代码。

目前最新版本为 6，版本 4 和版本 5 已不再支持。

在 MobX 6 中不推荐使用装饰器语法，因为它不是 ES 标准，并且标准化过程要花费很长时间，但是通过配置仍然可以启用装饰器语法。

MobX 可以运行在任何支持 ES5 的环境中，包含浏览器和 Node。

MobX 通常和 React 配合使用，但是在 Angular 和 Vue 中也可以使用 MobX。

02-mobx中的核心概念

核心概念

  1. observable：被 MobX 跟踪的状态。
  2. action：允许修改状态的方法，在严格模式下只有 action 方法被允许修改状态。
  3. computed：根据现有状态衍生出来的状态。
  4. flow：执行副作用，它是 generator 函数。可以更改状态值。

3. 工作流程

在这里插入图片描述
工作流程文字描述：
在视图中，通过触发事件，调用actions方法，当调用actions 方法之后，才会去更新状态，当这个状态更新完成之后会去更新基于这个状态的派生状态，派生状态更新完成之后，就会去更新视图了。这就是它的工作流程。

4. 下载

  • mobx：MobX 核心库
  • mobx-react-lite：仅支持函数组件
  • mobx-react：既支持函数组件也支持类组件

yarn add mobx@6.3.1 mobx-react-lite@3.2.0

5. 案例：驱动之计数器

在组件中显示数值状态，单击[+1]按钮使数值加一，单击[-1]按钮使数值减一。

  1. 创建用于存储状态的 Store
export default class CounterStore{
	constructor() {
		this.count = 0
	}
}
  1. 创建用于修改状态的方法
export default class CounterStore{
	constructor() {
		this.count = 0
	}
	increment() {
		this.count + =1
	}
	decrement() {
		this.count -=1
	}
	
}
  1. 让 MobX 可以追踪状态的变化
  • 3.1. 通过 observable 标识状态，使状态可观察
  • 3.2 通过 action 标识修改状态的方法，状态只有通过 action 方法修改后才会通知视图更新

// makeObservable: 
// 第一个参数是this，这个this指的是当前类的实例对象。 
// 第2个参数：配置对象。在这个对象中可以指定哪些是属性，哪些是状态。
import { action, makeObservable, observable } from "mobx"
   
export default class CounterStore {
   constructor() {
     this.count = 0
     makeObservable(this, {

       // 标记为状态
       count: observable,
 
       // 标记为更改状态的方法
       increment: action,
       decrement: action
     })
   }
   increment() {
     this.count += 1
   }
   decrement() {
     this.count -= 1
   }
 }
  1. 创建 Store 类的实例对象并将实例对象传递给组件
// App.js
import Counter from "./Counter"
import CounterStore from "../store/Counter"

const counterStore = new CounterStore()

function App() {
 return <Counter counterStore={counterStore} />
}

export default App
  1. 在组件中通过 Store 实例对象获取状态以及操作状态的方法
   function Counter({ counterStore }) {
     return (
       <Container>
         <Button onClick={() => counterStore.increment()}>
           INCREMENT
         </Button>
         <Button>{counterStore.count}</Button>
         <Button onClick={() => counterStore.decrement()}>
           DECREMENT
         </Button>
       </Container>
     )
   }
   
   export default Counter
  1. 当组件中使用到的 MobX 管理的状态发生变化后，使视图更新。通过 observer 方法包裹组件实现目的
   import { observer } from "mobx-react-lite"
   
   function Counter() { }
   
   export default observer(Counter)
  1. 简化组件代码(会报错，因为this指向问题)
 function Counter({ counterStore }) {
     const { count, increment, decrement } = counterStore
     return (
       <Container>
         <Button border="left" onClick={increment}>
           INCREMENT
         </Button>
         <Button>{count}</Button>
         <Button border="right" onClick={decrement}>
           DECREMENT
         </Button>
       </Container>
     )
   }
  1. 当代码简化后，修改状态的方法中的 this 指向出现了问题，通过 action.bound 强制绑定 this，使 this 指向 Store 实例对象
import { action, makeObservable, observable } from "mobx"
   
export default class CounterStore {
  constructor() {
    this.count = 0
    makeObservable(this, {
      // 标记为状态
      count: observable,

      // 标记为action
      increment: action.bound,
      decrement: action.bound
    })
  }
  increment() {
    this.count += 1
  }
  decrement() {
    this.count -= 1
  }
}

  1. 总结：状态变化更新视图的必要条件

    1. 状态必须被标记为 observable
    2. 更改状态的方法必须被标记为 action
    3. 组件必须通过 observer 方法包裹

  2. 创建RootStore实现全局状态共享
    1.在应用中可存在多个 Store，多个 Store 最终要通过 RootStore 管理，在每个组件都需要获取到 RootStore。
    2.实现全局状态共享

// store/index.js
    import { createContext, useContext } from "react"
    import CounterStore from "./Counter"
    
    class RootStore {
      constructor() {
        this.counterStore = new CounterStore()
      }
    }
    const rootStore = new RootStore()
    const RootStoreContext = createContext()
    
    export const RootStoreProvider = ({ children }) => {
      return (
        <RootStoreContext.Provider value={rootStore}>
          {children}
        </RootStoreContext.Provider>
      )
    }
    
    export const useRootStore = () => {
      return useContext(RootStoreContext)
    }

   // App.js
    import { RootStoreProvider } from "../store"
    import Counter from "./Counter"
    
    function App() {
      return (
        <RootStoreProvider>
          <Counter />
        </RootStoreProvider>
      )
    }
    
    export default App

// Counter.js
  import { observer } from "mobx-react-lite"
    import { useRootStore } from "../store"
    
    function Counter() {
      const { counterStore } = useRootStore()
      const { count, increment, decrement } = counterStore
      return (
        <Container>
          <Button onClick={increment}>
            INCREMENT
          </Button>
          <Button>{count}</Button>
          <Button onClick={decrement}>
            DECREMENT
          </Button>
        </Container>
      )
    }
    // 数据变化重新渲染组件
    export default observer(Counter)

6. 案例驱动之 Todo

6.1 创建 Store

  1. 创建用于管理 Todo 任务的 Store

    import { makeObservable, observable } from "mobx"

export default class Todo {
  constructor(todo) {
    this.id = todo.id
    this.title = todo.title
    this.isCompleted = todo.isCompleted || false
    this.isEditing = false
    makeObservable(this, {
      title: observable,
      isCompleted: observable,
      isEditing: observable
    })
  }
}

  2. 创建用于管理 Todo 任务列表的 Store

    import { makeObservable, observable } from "mobx"

export default class TodoStore {
  constructor() {
    this.todos = []
    makeObservable(this, {
      todos: observable
    })
  }
}
6.2 添加任务

  1. 创建向 todo 任务列表中添加 todo 任务的方法

    import { action, makeObservable, observable } from "mobx"
import Todo from "./Todo"

export default class TodoStore {
  constructor() {
    this.todos = []
    makeObservable(this, {
      todos: observable,
      addTodo: action.bound
    })
  }
  addTodo(title) {
    this.todos.push(new Todo({ title, id: this.generateTodoId() }))
  }
  generateTodoId() {
    if (!this.todos.length) return 1
    return this.todos.reduce((id, todo) => (id < todo.id ? todo.id : id), 0) + 1
  }
}

  2. 在组件中实现添加任务的逻辑

    import { useState } from "react"
import { useRootStore } from "../../store"

function Header() {
  const [title, setTitle] = useState("")
  const { todoStore } = useRootStore()
  const { addTodo } = todoStore
  return (
    <header className="header">
      <input
        value={title}
        onChange={e => setTitle(e.target.value)}
        onKeyUp={e => {
          if (e.key !== "Enter") return
          addTodo(title)
          setTitle("")
        }}
      />
    </header>
  )
}

export default Header
6.3 显示任务列表
import { observer } from "mobx-react-lite"
import { useRootStore } from "../../store"
import Todo from "./Todo"

function Main() {
  const { todoStore } = useRootStore()
  const { todos } = todoStore
  return (
    <section className="main">
      <ul className="todo-list">
        {todos.map(todo => (
          <Todo key={todo.id} todo={todo} />
        ))}
      </ul>
    </section>
  )
}

export default observer(Main)

function Todo({ todo }) {
  return (
    <li>
      <div className="view">
        <input className="toggle" type="checkbox" />
        <label>{todo.title}</label>
        <button className="destroy" />
      </div>
      <input className="edit" />
    </li>
  )
}

export default Todo
6.4 加载远端任务

  1. 下载 json-server：yarn add json-server@0.16.3

  2. 创建 db.json

    {
  "todos": [
    {
      "id": 1,
      "title": "吃饭",
      "isCompleted": false
    },
    {
      "id": 2,
      "title": "睡觉",
      "isCompleted": false
    },
    {
      "id": 3,
      "title": "打豆豆",
      "isCompleted": false
    }
  ]
}

  3. 在 package.json 文件中添加启动命令

    "scripts": {
    "json-server": "json-server --watch ./db.json --port 3001"
  }

  4. 启动 json-server：npm run json-server

  5. 在 todoStore 中添加加载任务列表的方法

    import axios from "axios"
import { flow, makeObservable, observable } from "mobx"
import Todo from "./Todo"

export default class TodoStore {
  constructor() {
    this.todos = []
    makeObservable(this, {
      todos: observable,
      loadTodos: flow
    })
    this.loadTodos()
  }
  *loadTodos() {
    let response = yield axios.get("http://localhost:3001/todos")
    response.data.forEach(todo => this.todos.push(new Todo(todo)))
  }
}
6.5 更改任务状态

  1. 在 Todo 类中添加修改任务是否已经完成的方法

    export default class Todo {
  constructor() {
    makeObservable(this, {
      modifyTodoIsCompleted: action.bound
    })
  }
  modifyTodoIsCompleted() {
    this.isCompleted = !this.isCompleted
  }
}

  2. 创建 TodoCompleted 组件实现逻辑

    import { observer } from "mobx-react-lite"

function TodoCompleted({ todo }) {
  const { isCompleted, modifyTodoIsCompleted } = todo
  return (
    <input
      className="toggle"
      type="checkbox"
      checked={isCompleted}
      onChange={modifyTodoIsCompleted}
    />
  )
}

export default observer(TodoCompleted)

  3. 在 Todo 组件中引用TodoCompleted 组件并根据条件决定是否为 li 添加 completed 类名

    import { observer } from "mobx-react-lite"
import TodoCompleted from "./TodoCompleted"

function Todo({ todo }) {
  return (
    <li className={todo.isCompleted ? "completed" : ""}>
      <div className="view">
        <TodoCompleted todo={todo} />
      </div>
    </li>
  )
}

export default observer(Todo)
6.6 删除任务

  1. 在 todoStore 中添加实现删除任务的方法

    import axios from "axios"
import { action, makeObservable,  } from "mobx"

export default class TodoStore {
  constructor() {
    makeObservable(this, {
      removeTodo: action.bound
    })
  }
  removeTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id)
  }
}

  2. 创建 TodoDelete 组件实现删除 todo 任务逻辑

    import { useRootStore } from "../../store"

function TodoDelete({ id }) {
  const { todoStore } = useRootStore()
  const { removeTodo } = todoStore
  return <button className="destroy" onClick={removeTodo.bind(null, id)} />
}

export default TodoDelete

  3. 在 Todo 组件调用 TodoDelete 组件并传入 todo ID

    import { observer } from "mobx-react-lite"
import TodoDelete from "./TodoDelete"

function Todo({ todo }) {
  return (
    <li>
      <div className="view">
        <TodoDelete id={todo.id} />
      </div>
    </li>
  )
}

export default observer(Todo)
6.7 编辑任务

  1. 在 todoStore 中添加更改任务是否处于编辑状态的方法

    import { action, makeObservable } from "mobx"

export default class Todo {
  constructor(todo) {
    makeObservable(this, {
      modifyTodoIsEditing: action.bound,
    })
  }
  modifyTodoIsEditing() {
    this.isEditing = !this.isEditing
  }
}

  2. 添加 TodoTitle 组件展示任务标题并为其添加双击事件，当事件发生时将任务更改为可编辑状态

    function TodoTitle({ todo }) {
  const { title, modifyTodoIsEditing } = todo
  return <label onDoubleClick={modifyTodoIsEditing}>{title}</label>
}

export default TodoTitle

  3. 在 Todo 组件中调用 TodoTitle 组件，并为 li 添加 editing 类名

    import { observer } from "mobx-react-lite"
import TodoTitle from "./TodoTitle"
import classnames from "classnames"

function Todo({ todo }) {
  return (
    <li className={classnames({ completed: todo.isCompleted, editing: todo.isEditing })} >
      <div className="view">
        <TodoTitle todo={todo} />
      </div>
    </li>
  )
}

export default observer(Todo)

  4. 创建 TodoEditing 组件实现编辑 todo 任务标题

    import { useRef, useEffect } from "react"

function TodoEditing({ todo }) {
  const { title, modifyTodoTitle, isEditing } = todo
  const ref = useRef(null)
  useEffect(() => {
    if (isEditing) ref.current.focus()
  }, [isEditing])
  return (
    <input
      ref={ref}
      className="edit"
      defaultValue={title}
      onBlur={e => modifyTodoTitle(e.target.value)}
    />
  )
}

export default TodoEditing

  5. 在 Todo 组件中调用 TodoEditing 组件并传递 todo 任务

    import { observer } from "mobx-react-lite"
import TodoTitle from "./TodoTitle"
import classnames from "classnames"
import TodoEditing from "./TodoEditing"

function Todo({ todo }) {
  return (
    <li className={classnames({ completed: todo.isCompleted, editing: todo.isEditing })} >
      <div className="view">
        <TodoTitle todo={todo} />
      </div>
      <TodoEditing todo={todo} />
    </li>
  )
}

export default observer(Todo)
6.8 计算未完成任务数量

  1. 在 todoStore 中添加获取未完成任务数量的派生状态

    import axios from "axios"
import { makeObservable, computed } from "mobx"

export default class TodoStore {
  constructor() {
    makeObservable(this, {
      unCompletedTodoCount: computed
    })
  }
  // 派生状态
  get unCompletedTodoCount() {
    return this.todos.filter(todo => !todo.isCompleted).length
  }
}

  2. 创建 UnCompletedTodoCount 组件实现逻辑

    import { observer } from "mobx-react-lite"
import { useRootStore } from "../../store"

function UnCompletedTodoCount() {
  const { todoStore } = useRootStore()
  const { unCompletedTodoCount } = todoStore
  return (
    <span className="todo-count">
      <strong>{unCompletedTodoCount}</strong> item left
    </span>
  )
}

export default observer(UnCompletedTodoCount)

  3. 在 Footer 组件中调用 UnCompletedTodoCount 组件

    import UnCompletedTodoCount from "./UnCompletedTodoCount"

function Footer() {
  return (
    <footer className="footer">
      <UnCompletedTodoCount />
    </footer>
  )
}

export default Footer
6.9 任务过滤

  1. 在 todoStore 中添加存储过滤条件的属性以及更改过滤条件的方法

    import axios from "axios"
import { action, makeObservable, observable, } from "mobx"

export default class TodoStore {
  constructor() {
    this.filterCondition = "All"
    makeObservable(this, {
      modifyFilterCondition: action.bound,
      filterCondition: observable,
    })
  }
  modifyFilterCondition(filterCondition) {
    this.filterCondition = filterCondition
  }
}

  2. 创建 TodoFilter 组件，为过滤按钮添加事件以更改过滤条件，根据过滤条件为按钮添加 selected 类名

    import classNames from "classnames"
import { observer } from "mobx-react-lite"
import { useRootStore } from "../../store"

function TodoFilter() {
  const { todoStore } = useRootStore()
  const { filterCondition, modifyFilterCondition } = todoStore
  return (
    <ul className="filters">
      <li>
        <button
          onClick={() => modifyFilterCondition("All")}
          className={classNames({ selected: filterCondition === "All" })}
        >
          All
        </button>
      </li>
      <li>
        <button
          onClick={() => modifyFilterCondition("Active")}
          className={classNames({ selected: filterCondition === "Active" })}
        >
          Active
        </button>
      </li>
      <li>
        <button
          onClick={() => modifyFilterCondition("Completed")}
          className={classNames({ selected: filterCondition === "Completed" })}
        >
          Completed
        </button>
      </li>
    </ul>
  )
}

export default observer(TodoFilter)

  3. 在 Footer 组件中调用 TodoFilter 组件

    import TodoFilter from "./TodoFilter"

function Footer() {
  return (
    <footer className="footer">
      <TodoFilter />
    </footer>
  )
}

export default Footer

  4. 在 TodoStore 中添加派生状态，根据条件获取过滤后的 todo 列表

    import axios from "axios"
import { action, flow, makeObservable, observable, computed } from "mobx"
import Todo from "./Todo"

export default class TodoStore {
  constructor() {
    makeObservable(this, {
      filterTodos: computed
    })
  }
  get filterTodos() {
    switch (this.filterCondition) {
      case "Active":
        return this.todos.filter(todo => !todo.isCompleted)
      case "Completed":
        return this.todos.filter(todo => todo.isCompleted)
      default:
        return this.todos
    }
  }
}

  5. 在 Main 组件获取 filterTodos 派生状态

    import { observer } from "mobx-react-lite"
import { useRootStore } from "../../store"
import Todo from "./Todo"

function Main() {
  const { todoStore } = useRootStore()
  const { filterTodos } = todoStore
  return (
    <section className="main">
      <ul className="todo-list">
        {filterTodos.map(todo => (
          <Todo key={todo.id} todo={todo} />
        ))}
      </ul>
    </section>
  )
}

export default observer(Main)
6.10 清除已完成任务

  1. 在 TodoStore 中添加清除已完成任务的方法

    import axios from "axios"
import { action, makeObservable, } from "mobx"

export default class TodoStore {
  constructor() {
    makeObservable(this, {
      clearCompleted: action.bound
    })
  }
  clearCompleted() {
    this.todos = this.todos.filter(todo => !todo.isCompleted)
  }
}

  2. 创建 ClearCompleted 组件实现清除已完成任务功能

    import { useRootStore } from "../../store"

function ClearCompleted() {
  const { todoStore } = useRootStore()
  const { clearCompleted } = todoStore
  return (
    <button className="clear-completed" onClick={clearCompleted}>
      Clear completed
    </button>
  )
}

export default ClearCompleted

  3. 在 Footer 组件中调用 ClearCompleted 组件

    import ClearCompleted from "./ClearCompleted"

function Footer() {
  return (
    <footer className="footer">
      <ClearCompleted />
    </footer>
  )
}

export default Footer
yanling.zhang
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题整理6-react
loveX001的博客
02-25 439
抹平浏览器差异，实现更好的跨平台。避免垃圾回收，React 引入事件池，在事件池中获取或释放事件对象，避免频繁地去创建和销毁。方便事件统一管理和事务机制。为了解决跨浏览器兼容性问题，React会将浏览器原生事件（）封装为合成事件（）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样React在更新DOM。
react-mobx解析及实现简单计数器
热门推荐
barbiElluck的博客
07-13 7万+
一. mobx解析 mobx背后的哲学其实很简单: 任何源自应用状态的东西都应该自动地获得。 其中包括UI、数据序列化、服务器通讯，等等。 React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。 安装: cnpm i mobx mobx-react -S 单项数据流: MobX 支持单向数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图。 mobx原则 当状态改变时，所有
Mobx6 基本使用
lsk222的博客
04-20 1806
Mobx6
react mobx mobx-react-lite 使用
AdleyTales的技术博客
05-16 251
【代码】react mobx mobx-react-lite 使用。
React+Mobx+Antd前端项目实战
xuanyu.li的博客
10-10 1025
React+Mobx+Antd实现前端项目开发——todo-app案例
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mr_Roki的博客
05-29 268
Mobx。
使用mobx和mobx-react代替redux和react-redux
weixin_34329187的博客
12-10 848
一：主要介绍一下mobx-react mobx-react的优点： 用mobx和mobx-react代替redux和react-redux已经时大势所趋，既解决越写越零散的reducer，又解决了跨组件引入状态管理的问题。 复制代码 1、安装，这里有两个包需要安装，mobx 和 mobx-react npm i mobx mobx-react --s-d 复制代码或者 npm install...
前端精髓-React
hulovelove的博客
09-04 328
具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.e m i t （’自定义事件名’，要发送的值）发送数据，在组件 B 中通过 b u s . emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据。
React使用mobx
AWDSDF的博客
10-15 507
React使用mobx
前端知识体系(7)-react篇
weixin_39818813的博客
10-25 573
React是一个简单的javascript UI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等HTML file// HTML。
前端项目-mobx-react.zip
09-02
2. **MobX**：MobX是一个声明式的响应式数据流管理库。它允许开发者定义可观察的状态对象，当这些对象发生变化时，依赖它们的计算值和视图会自动更新。 3. **React与MobX集成**：在React中，状态管理可以变得复杂，...
react-mobx-state-tree-demo:利用react，mobx-state-tree和一些antd组件
05-15
在本项目"react-mobx-state-tree-demo"中，开发者运用了React、MobX状态树（mobx-state-tree）以及Ant Design组件库，构建了一个演示应用。这个应用旨在展示如何将这些技术有效地结合在一起，实现一个功能完备且易于...
mobx-react-app
05-02
React 是一个用于构建用户界面的 JavaScript 库，尤其擅长单向数据流的应用。在这个项目中，React 负责将 MobX 管理的状态转换为用户可见的 UI。开发者使用函数组件或者类组件来编写 UI，通过 `useObserver` 或 `...
react-为了将React与Mobx结合起来的一个React组件包
08-14
React 和 MobX 结合使用是现代前端开发中的常见实践，以实现高效的数据状态管理。`react-为了将React与MobX结合起来的一个React组件包` 正是为了解决这一问题而设计的。在这个组件包中，它提供了一个 `observer` ...
react-hooks-mobx-realworld-example-app:react-hooks-mobx-real-example-app
05-06
React Hooks 的引入极大地改变了React组件的编写方式，而MobX则是一种流行的状态管理工具，它使得复杂的反应式状态管理变得简单。本项目 "react-hooks-mobx-realworld-example-app" 是一个实战应用示例，它将这两者...
react组件通信方式
qq_47040462的博客
07-24 279
【代码】react组件通信方式。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1142
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
React 中 useState 语法详解
最新发布
越陌度阡
07-25 244
React 中 useState 语法详解：state：定义的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。dispatch：改变state的函数，推动函数渲染的渲染函数，有非函数和函数两种情况。initData：state的初始值，有非函数和函数两种情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值