第十周

date

Jun 20, 2022

VS Code 美化插件：Customize UI

把编辑器中的元素尽量的隐藏，频繁使用的操作使用快捷键，不常用的使用命令面板搜索后调用。

具体的配置字段和值：CustomizeUI - GitHub

Blender 入门

【blender】blender3.1新手0基础入门【全集】，全中文教程，中文软件，(普通话+全流程+案例+学习)持续跟新中_哔哩哔哩_bilibili

【持续跟新中】【本课程为免费自制教程】适合新手上手此软件【每节课的需要用到的贴图和物料课件我会及时放出供大家一起学习使用】【零基础机甲案例完整版教程 (付费)：https://www.cgmodel.com/xue/988.html】【第二章可乐瓶案例已经更新（免费）：https://www.bilibili.com/video/BV1pL4y1N7ww】【全课程配套文件：https:/

https://www.bilibili.com/video/BV1US4y1N7xN?share_source=copy_web

【blender】blender3.1新手0基础入门【全集】，全中文教程，中文软件，(普通话+全流程+案例+学习)持续跟新中_哔哩哔哩_bilibili

跟着把最基础的选择、移动、缩放等工具玩了一下。3D 建模还是很好玩的呀

在 Svelte 中使用 React 组件

Svelte 简洁的语法写起来很愉快，但 Svelte 社区的轮子肯定是没办法和 React 相比的。工作中有业务需要 Ant Design 的穿梭框控件，这就得在 Svelte 中使用 React 组件。之前觉得不同框架之间的组件是存在天然屏障的，他们之间是无法共存或进行交互。看完同事写的 React 适配器（react-adapter.svelte）代码后，对这件事有了和之前不一样的理解。

React 的核心是用 React.createElement 创建 React 元素，并使用 ReactDOM.render 来把 React 元素渲染到某个 DOM 元素之中。

在 Svelte 组件中拿到 DOM 元素后交给 ReactDOM.render 来渲染

React 组件需要的 Props 通过 React.createElement(component, props) 传入

react-adapter.svelte

{#if component}
  <div use:react style="{$$props.style}"><slot /></div>
{/if}

<script>
  import { createElement, useState, useEffect } from 'react';
  import ReactDOM from 'react-dom';

  import { getLanguage } from '~/utils/language';
  import getPrimaryColor from '~/utils/get-primary-color';
  import { ConfigProvider } from 'antd';
  import cn from 'antd/lib/locale/zh_CN.js';
  import en from 'antd/lib/locale/en_US.js';

  export let component;
  let hook = {};

  $: if ($$props && hook.update) {
    hook.update({ ...$$props });
  }

	// 当 Svelte 的组件 Props 变化时，利用 useState 来触发 React 组件的更新。
  function Component() {
    let [state, setState] = useState({});
    let node = createElement(component, {...state});
    useEffect(() => hook.update = setState, []);
    return node;
  }

	// 创建 AntD 需要的 Provider ，处理本地化和主题相关的功能
  function withConfigProvider(props) {
    const locale = ({ 'zh-CN': cn, 'en': en })[getLanguage()];
    ConfigProvider.config({
      theme: {
        primaryColor: getPrimaryColor(),
      }
    });
    return createElement(ConfigProvider, { locale, ...props });
  }

	// 通过 Svelte 的 use API 拿到 DOM 元素交给 ReactDOM 渲染
  function react(element) {
    const Node = withConfigProvider({
      children: createElement(Component, {})
    });
    ReactDOM.render(Node, element);
    return {
      destory() {
        try {
          ReactDOM.unmountComponentAtNode(element);
        } catch(e) {}
      }
    }
  }
</script>