Mitosis开发技巧和注意事项

我们采用了ESLint，这样当你遇到限制时，会看到警告。这些lint规则是一个很好的文档来源，请先确保你读了这些规则。

用与状态属性有相同名字的变/常量容易有误导性

比如，如果错误输入为：

export default function MyComponent() {
  const state = useStore({
    foo: 'bar',

    doSomething() {
      const foo = state.foo;
    },
  });
}

错误输出为：

import { useState } from 'react';

export default function MyComponent(props) {
  const [foo, setFoo] = useState(() => 'bar');
  function doSomething() {
    const foo = foo;
  }

  return <></>;
}

修改 - 用不同的名字命名变/常量

正确输入：

export default function MyComponent() {
  const state = useStore({
    foo: 'bar',

    doSomething() {
      const foo_ = state.foo;
    },
  });
}

正确输出：

import { useState } from 'react';

export default function MyComponent(props) {
  const [foo, setFoo] = useState(() => 'bar');
  function doSomething() {
    const foo_ = foo;
  }

  return <></>;
}

异步函数不能被定义在"state"中

错误输入：

export default function MyComponent() {
  const state = useStore({
    async doSomethingAsync(event) {
      //  ^^^^^^^^^^^^^^^^^^^^^^^^^
      //  Fails to parse this line
      return;
    },
  });
}

修改 - a.在context中使用promise，或者b.立即调用异步函数

正确输入：

export default function MyComponent() {
  const state = useStore({
    doSomethingAsync(event) {
      void (async function () {
        const response = await fetch(); /* ... */
      })();
    },
  });
}

正确输出：

import { useState } from 'react';

export default function MyComponent(props) {
  function doSomethingAsync(event) {
    void (async function () {
      const response = await fetch();
    })();
  }

  return <></>;
}

函数不能通过state引用传到JSX组件中作为callback

错误输入：

export default function MyComponent() {
  const state = useStore({
    myCallback(event) {
      // do something
    },
  });

  return <input onClick={state.myCallback} />;
}

错误输出：

import { useState } from 'react';

export default function MyComponent(props) {
  function myCallback(event) {
    // do something
  }

  return (
    <>
      <input
        onClick={(event) => {
          myCallback; // mycallback不会执行
        }}
      />
    </>
  );
}

修改 - 在callback中定义匿名函数

正确输入：

export default function MyComponent() {
  const state = useStore({
    myCallback(event) {
      // do something
    },
  });

  return <input onClick={(event) => state.myCallback(event)} />;
}

正确输出：

import { useState } from 'react';

export default function MyComponent(props) {
  function myCallback(event) {
    // do something
  }

  return (
    <>
      <input
        onClick={(event) => {
          myCallback(event);
        }}
      />
    </>
  );
}

不能把组件传进来的props里的参数传给"state"

当在useState中引用props时，JSX解析器会报错。

错误输入：

export default function MyComponent(props) {
  const state = useStore({ text: props.text });
  //                             ^^^^^^^^^^
  //                             Could not JSON5 parse object
}

修改 - 使用onMount

正确输入：

export default function MyComponent(props) {
  const state = useStore({ text: null });

  onMount(() => {
    state.text = props.text;
  });
}

正确输出：

import { useState } from 'react';

export default function MyComponent(props) {
  const [text, setText] = useState(() => null);

  useEffect(() => {
    setText(props.text);
  }, []);

  return <></>;
}

不能把函数的输出赋值给"state"

如果某个state值不是一个合法的JSON对象，JSX解析器会报错。 如果初始状态值是一个需要被计算出来的值（无论是否基于props或某些其他函数的输出），你不能直接在useStore里写，你需要使用getter方法。

错误输入：

import { kebabCase } from 'lodash';

export default function MyComponent(props) {
  const state = useStore({
    name: kebabCase('Steve'),
    //    ^^^^^^^^^
    //    Could not JSON5 parse object
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
    </div>
  );
}

修改 - 用getter方法

正确输入：

import { kebabCase } from 'lodash';

export default function MyComponent(props) {
  const state = useStore({
    get name() {
      return kebabCase('Steve');
    },
  });

  return (
    <div>
      <h2>Hello, {state.name}</h2>
    </div>
  );
}

正确输出：

import { kebabCase } from 'lodash';

export default function MyComponent(props) {
  function name() {
    return kebabCase('Steve');
  }

  return (
    <div>
      <h2>
        Hello,
        {name()}
      </h2>
    </div>
  );
}

不能为state做解构赋值

目前不支持这样做，编译器会忽略这部分代码。

错误输入：

export default function MyComponent() {
  const state = useStore({ foo: '1' });

  onMount(() => {
    const { foo } = state;
  });
}

错误输出：

import { useState } from 'react';

export default function MyComponent(props) {
  const [foo, setFoo] = useState(() => '1');

  useEffect(() => {
    const { foo } = state;
  }, []);

  return <></>;
}

修改 - 用标准方式赋值

正确输入：

export default function MyComponent() {
  const state = useStore({ foo: '1' });

  onMount(() => {
    const foo = state.foo;
  });
}

正确输出：

import { useState } from 'react';

export default function MyComponent(props) {
  const [foo, setFoo] = useState(() => '1');

  useEffect(() => {
    const foo = foo;
  }, []);

  return <></>;
}

不能通过结构为组件参数设置默认值

目前不支持这样做，编译器会忽略这部分代码。

错误输入：

export default function MyComponent({ color = 'blue' }) {
  return <div>{color}</div>;
}

错误输出：

export default function MyComponent(props) {
  return <div>{color}</div>;
}

修改 - 定义局部变量

正确输入：

const DEFAULT_VALUES = {
  color: 'blue',
};
export default function MyComponent(props) {
  return <div>{props.color || DEFAULT_VALUES.color}</div>;
}

正确输出：

const DEFAULT_VALUES = {
  color: 'blue',
};
export default function MyComponent(props) {
  return <div>{props.color || DEFAULT_VALUES.color}</div>;
}

不能用...rest解构

错误输入：

export default function MyComponent({ children, ...rest }) {
  return <div {...rest}>{children}</div>;
}

错误输出：

export default function MyComponent(props) {
  return <div {...rest}>{props.children}</div>;
}

因此我们需要清楚每一个输入参数。

参考

github.com/BuilderIO/m...