发布于 由admin

WordPress源码深度解析之：古腾堡的`Hooks`：`data`模块中的`useSelect`和`useDispatch`的原理。

各位观众老爷，晚上好！我是今晚的主讲人，咱们今天要聊点有意思的，关于WordPress古腾堡编辑器里那些藏得很深的“钩子”——特别是data模块里的useSelect和useDispatch。

别听到“钩子”就觉得是海盗船上的玩意儿，这里的钩子，指的是能让你在特定的时间点“钩住”代码执行流程，然后做点你自己的小动作。在古腾堡的世界里，这可是自定义编辑器行为，扩展功能的关键所在。

一、古腾堡的data模块：一个小型状态管理中心

首先，咱们得搞清楚data模块是干嘛的。简单来说，它就像一个迷你的Redux或者Vuex，负责管理古腾堡编辑器的各种状态。比如，当前选中的区块是什么？文章标题是什么？有没有保存？这些都由data模块统一管理。

这个模块的核心思想是“Store”，你可以把它想象成一个数据库，里面存放着各种各样的数据。然后，你就可以通过“Selectors”来读取这些数据，通过“Actions”来修改这些数据。

  • Store: 存储状态的地方
  • Selectors: 读取状态的工具
  • Actions: 修改状态的工具

二、useSelect：读取数据的千里眼

useSelect，顾名思义，就是用来“选择”数据的。它是一个React Hook，让你能在你的组件里“订阅”Store里的数据。当Store里的数据发生变化时，useSelect会自动更新你的组件。

咱们先来看一个简单的例子：

import { useSelect } from '@wordpress/data';

function MyComponent() {
  const postTitle = useSelect( ( select ) => {
    return select( 'core/editor' ).getEditedPostAttribute( 'title' );
  }, [] );

  return (
    <div>
      <h1>文章标题：{ postTitle }</h1>
    </div>
  );
}

这段代码做了什么？

  1. import { useSelect } from '@wordpress/data';: 引入useSelect这个Hook。
  2. useSelect( ( select ) => { ... }, [] ): 调用useSelect Hook。
    • 第一个参数是一个函数，这个函数接收一个select对象作为参数。select对象提供了一系列的方法，让你能从Store里读取数据。
    • 第二个参数是一个依赖项数组。只有当这个数组里的值发生变化时，useSelect才会重新执行。这里我们传入一个空数组[]，表示只在组件第一次渲染时执行一次。
  3. select( 'core/editor' ).getEditedPostAttribute( 'title' ): 这是关键的一行代码。
    • select( 'core/editor' )： 从Store里选择core/editor这个namespace。你可以把namespace理解成一个模块，每个模块负责管理一部分数据。core/editor模块负责管理文章编辑器的状态。
    • getEditedPostAttribute( 'title' )： 从core/editor模块里获取文章的标题。

简单来说，这段代码就是从core/editor模块里读取文章的标题，然后显示在组件里。当文章标题发生变化时，组件会自动更新。

那么，useSelect背后的原理是什么呢？

  • 依赖追踪: useSelect会记住你读取了哪些数据。当这些数据发生变化时，它会通知你的组件重新渲染。
  • 性能优化: useSelect只会监听你真正用到的数据。如果你只读取了文章标题，那么只有当文章标题发生变化时，它才会通知你的组件重新渲染。
  • 缓存机制: useSelect会缓存上次读取到的数据。如果数据没有发生变化，它会直接返回缓存的数据，避免重复计算。

用表格总结一下：

特性 描述
依赖追踪 useSelect会追踪你在selector函数里读取了哪些数据，只有当这些数据发生变化时，才会触发组件的重新渲染。
性能优化 通过依赖追踪，useSelect只会在必要的时候触发重新渲染，避免了不必要的性能损耗。
缓存机制 useSelect会缓存上次selector函数的结果，如果依赖项没有发生变化，则直接返回缓存的结果，避免重复计算。

三、useDispatch：修改数据的遥控器

useDispatch，就是用来“发送”Action的。它也是一个React Hook，让你能在你的组件里“触发”Action。Action会告诉Store你要修改哪些数据。

咱们来看一个简单的例子：

import { useDispatch } from '@wordpress/data';

function MyComponent() {
  const { updatePost } = useDispatch( 'core/editor' );

  const handleClick = () => {
    updatePost( { title: '新的文章标题' } );
  };

  return (
    <button onClick={ handleClick }>修改文章标题</button>
  );
}

这段代码做了什么？

  1. import { useDispatch } from '@wordpress/data';: 引入useDispatch这个Hook。
  2. useDispatch( 'core/editor' ): 调用useDispatch Hook，并传入namespace core/editor。它会返回一个对象，这个对象包含了core/editor模块提供的所有Action。
  3. updatePost( { title: '新的文章标题' } ): 调用updatePost Action，并传入一个对象，这个对象包含了要修改的数据。

简单来说，这段代码就是点击按钮后，会触发updatePost Action，然后把文章标题修改为“新的文章标题”。

那么，useDispatch背后的原理是什么呢？

  • Action分发: useDispatch会把你的Action发送到Store。
  • 中间件支持: useDispatch支持中间件。中间件可以在Action被发送到Store之前或者之后做一些处理。比如，你可以用中间件来记录日志，或者做一些异步操作。

用表格总结一下：

特性 描述
Action分发 useDispatch负责将Action发送到Store，触发状态的更新。
中间件支持 useDispatch支持中间件机制，允许你在Action被dispatch前后执行一些额外的逻辑，例如日志记录、异步操作等。这为状态管理提供了更大的灵活性和可扩展性。

四、useSelect和useDispatch的联系与区别

useSelect和useDispatch是古腾堡data模块里两个最常用的Hook。它们的关系就像一对好基友，一个负责读取数据，一个负责修改数据。

特性 useSelect useDispatch
作用 读取Store里的数据。 触发Action，修改Store里的数据。
参数 接收一个selector函数和一个依赖项数组。 接收一个namespace。
返回值 返回selector函数的结果。 返回一个对象，这个对象包含了namespace提供的所有Action。
触发条件 当依赖项数组里的值发生变化时，selector函数会重新执行。 总是返回相同的对象，所以不需要依赖项。
使用场景 当你需要从Store里读取数据，并显示在组件里时。 当你需要修改Store里的数据时。

五、自定义Store：打造你的专属数据中心

古腾堡允许你自定义Store，这样你就可以管理自己的数据了。

首先，你需要创建一个Store：

import { createReduxStore, register } from '@wordpress/data';

const myStore = createReduxStore( 'my-plugin/my-store', {
  reducer( state = { count: 0 }, action ) {
    switch ( action.type ) {
      case 'INCREMENT':
        return { ...state, count: state.count + 1 };
      case 'DECREMENT':
        return { ...state, count: state.count - 1 };
      default:
        return state;
    }
  },

  actions: {
    increment() {
      return {
        type: 'INCREMENT',
      };
    },
    decrement() {
      return {
        type: 'DECREMENT',
      };
    },
  },

  selectors: {
    getCount( state ) {
      return state.count;
    },
  },
} );

register( myStore );

这段代码做了什么？

  1. createReduxStore( 'my-plugin/my-store', { ... } ): 创建一个Redux Store，并传入一个配置对象。
    • 'my-plugin/my-store'： Store的namespace。
    • reducer： 一个reducer函数，负责处理Action，并更新状态。
    • actions： 一个对象，包含了Store提供的所有Action。
    • selectors： 一个对象，包含了Store提供的所有Selector。
  2. register( myStore ): 把Store注册到古腾堡。

然后，你就可以在你的组件里使用useSelect和useDispatch来读取和修改Store里的数据了：

import { useSelect, useDispatch } from '@wordpress/data';

function MyComponent() {
  const count = useSelect( ( select ) => {
    return select( 'my-plugin/my-store' ).getCount();
  }, [] );

  const { increment, decrement } = useDispatch( 'my-plugin/my-store' );

  return (
    <div>
      <p>Count: { count }</p>
      <button onClick={ increment }>Increment</button>
      <button onClick={ decrement }>Decrement</button>
    </div>
  );
}

六、高级技巧：中间件的应用

中间件是data模块的一个高级特性，它可以让你在Action被发送到Store之前或者之后做一些处理。

比如，你可以用中间件来记录日志：

const loggerMiddleware = ( store ) => ( next ) => ( action ) => {
  console.log( 'Dispatching action:', action );
  const result = next( action );
  console.log( 'Next state:', store.getState() );
  return result;
};

然后，你需要在创建Store的时候，把中间件添加到配置对象里：

const myStore = createReduxStore( 'my-plugin/my-store', {
  // ...
  middleware: [ loggerMiddleware ],
} );

这样，每次你发送一个Action，都会在控制台里看到Action的类型和下一个状态。

七、总结

今天我们聊了古腾堡data模块里的useSelect和useDispatch。它们是自定义编辑器行为，扩展功能的关键所在。

  • useSelect用来读取Store里的数据。
  • useDispatch用来触发Action，修改Store里的数据。

通过自定义Store和使用中间件，你可以打造你的专属数据中心，让你的古腾堡插件更加强大。

希望今天的讲解对大家有所帮助。各位观众老爷，咱们下期再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注