6. Mitosis hooks用法大全

上篇文章《5. Mitosis开发特性大全》介绍了Mitosis的基本写法，这篇文章将介绍hook的用法。

useRef

用useRef可以保存一个已经渲染的dom元素的引用。

import { useStore, useRef, Show } from '@builder.io/mitosis';

export default function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  const state = useStore({
    name: 'Steve',
    onBlur() {
      // Maintain focus
      inputRef.focus();
    },
    get lowerCaseName() {
      return state.name.toLowerCase();
    },
  });

  return (
    <div>
      <Show when={props.showInput}>
        <input
          ref={inputRef}
          css={{ color: 'red' }}
          value={state.name}
          onBlur={() => state.onBlur()}
          onChange={(event) => (state.name = event.target.value)}
        />
      </Show>
      Hello {state.lowerCaseName}! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
}

React中的forwardRef

在React中，你可能需要将组件用forwardRef包起来，而在Mitosis中，你只需要用props。 Mitosis中的写法：

export default function MyInput(props) {
  return <input ref={props.inputRef} />;
}

导出的React会变成：

import { forwardRef } from 'react';

export default forwardRef(function MyInput(props, inputRef) {
  return <input ref={inputRef} />;
});

useStyle

useStyle可以给你的组件添加额外的CSS。

import { useStyle } from '@builder.io/mitosis';

export default function MyComponent(props) {
  useStyle(`
    button {
      font-size: 12px;
      outline: 1px solid black;
    }
  `);

  return (
    <button
      css={{
        background: 'blue',
        color: 'white',
      }}
      type="button"
    >
      Button
    </button>
  );
}

useStyle同样可以用在组件外面。

import { useStyle } from '@builder.io/mitosis';

export default function MyComponent(props) {
  return <button type="button">Button</button>;
}

useStyle(`
  button {
    background: blue;
    color: white;
    font-size: 12px;
    outline: 1px solid black;
  }
`);

onInit

组件挂载onMounted之前需要执行的代码都可以放到onInit里。

import { onInit, onMount } from '@builder.io/mitosis';

export default function MyComponent() {
  onInit(() => {
    alert('First: I have init!');
  });

  onMount(() => {
    alert('Second: I have mounted!');
  });

  return <div>Hello world</div>;
}

onMount

组件一旦挂载后立马执行的代码可以放这里。

import { onMount } from '@builder.io/mitosis';

export default function MyComponent() {
  onMount(() => {
    alert('I have mounted!');
  });

  return <div>Hello world</div>;
}

onUnMount

当组件被消除时需要做一些清理的代码可以放这里。

import { onUnMount } from '@builder.io/mitosis';

export default function MyComponent() {
  onUnMount(() => {
    alert('I have been removed!');
  });

  return <div>Hello world</div>;
}

onUpdate

在onUpdate里的代码可以：

• 当没有依赖项时，每刷新/渲染一次，执行一次
• 如果有依赖项时，依赖项改变一次，就执行一次

import { useStore, onUpdate } from '@builder.io/mitosis';

export default function OnUpdateWithDeps() {
  const state = useStore({
    a: 'a',
    b: 'b',
  });

  onUpdate(() => {
    console.log('Runs on every update/rerender');
  });

  onUpdate(() => {
    console.log('Runs when a or b changes', state.a, state.b);
  }, [state.a, state.b]);

  return <div />;
}

useDefaultProps

用来给组件的props设置默认值。

import { useDefaultProps } from '@builder.io/mitosis';

export default function Button(props) {
  useDefaultProps({
    text: 'default text',
    link: 'https://builder.io/',
    openLinkInNewTab: false,
    onClick: () => {
      console.log('hi');
    },
  });

  return (
    <div>
      <a href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
        {props.text}
      </a>
      <button onClick={(event) => props.onClick(event)} type="button">
        {props.buttonText}
      </button>
    </div>
  );
}

你也可以在组件外部使用useDefaultProps。

import { useDefaultProps } from '@builder.io/mitosis';

useDefaultProps({
  text: 'default text',
});

export default function Button(props) {
  return <span>{props.text}</span>;
}

下一篇：《7. Mitosis开发JS库时还可以做哪些定制化》

参考

github.com/BuilderIO/m…