React 代码习惯和最佳实践

{
  'import/order': [
    2,
    {
      'newlines-between': 'always',
      groups: [
        'builtin',
        'external',
        'internal',
        'parent',
        'sibling',
        'index',
        'unknown',
        'object',
        'type',
      ],
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
      pathGroups: [
        {
          pattern: 'react*',
          group: 'external',
          position: 'before',
        },
      ],
    },
  ],
}

// React component
const BannersEditForm = () => {
 ...
}

// Typescript interface
interface TodoItem {
 id: number;
 name: string;
 value: string;
}

// Typescript type alias
type TodoList = TodoItem[];

const getLastDigit = () => { ... }

const userTypes = [ ... ]

src / utils / form.ts;
src / hooks / useForm.ts;
src / components / banners / edit / Form.tsx;

// ❌
export default MyComponent;

// ✅
export { MyComponent };
export const MyComponent = ...;
export type MyComponentType = ...;

// 1. Imports - 导入结构，经可能减少代码
import React, { PropsWithChildren, useState, useEffect } from 'react';

// 2. Types
type ComponentProps = {
  someProperty: string;
};

// 3. Styles - with @mui use styled API or sx prop of the component
const Wrapper = styled('div')(({ theme }) => ({
  color: theme.palette.white
}));

// 4. Additional variables
const SOME_CONSTANT = 'something';

// 5. Component
function Component({ someProperty }: PropsWithChildren<ComponentProps>) {
  // 5.1 Definitions
  const [state, setState] = useState(true);
  const { something } = useSomething();

  // 5.2 Functions
  function handleToggleState() {
    setState(!state);
  }

  // 5.3 Effects
  // ❌
  React.useEffect(() => {
    // ...
  }, []);

  // ✅
  useEffect(() => {
    // ...
  }, []);

  // 5.5 Additional destructures
  const { property } = something;

  return (
    <div>
      {/* Separate elements if not closed on the same line to make the code clearer */}
      {/* ❌ */}
      <div>
        <div>
          <p>Lorem ipsum</p>
          <p>Pellentesque arcu</p>
        </div>
        <p>Lorem ipsum</p>
        <p>Pellentesque arcu</p>
      </div>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque
          arcu. Et harum quidem rerum facilis est et expedita distinctio.
        </p>
        <p>Pellentesque arcu</p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque
          arcu. Et harum quidem rerum facilis est et expedita distinctio.
        </p>
      </div>

      {/* ✅ */}
      <Wrapper>
        <div>
          <p>Lorem ipsum</p>
          <p>Pellentesque arcu</p>
        </div>

        <p>Lorem ipsum</p>
        <p>Pellentesque arcu</p>
      </Wrapper>

      <div>
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Pellentesque arcu. Et harum quidem rerum facilis est et expedita
            distinctio.
          </p>

          <p>Pellentesque arcu</p>

          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Pellentesque arcu. Et harum quidem rerum facilis est et expedita
            distinctio.
          </p>
        </div>
      </div>
    </div>
  );
}

// 6. Exports
export { Component };
export type { ComponentProps };

import React, { PropsWithChildren } from 'react';

type ComponentProps = {
  someProperty: string;
};

// ✅
function Component({
  someProperty,
  children
}: PropsWithChildren<ComponentProps>) {
  // ...
}

// ❌
<button
  onClick={() => {
    setState(!state);
    resetForm();
    reloadData();
  }}
/>

// ✅
<button onClick={() => setState(!state)} />

// ✅
const handleButtonClick = () => {
  setState(!state);
  resetForm();
  reloadData();
}

<button onClick={handleButtonClick} />

// ❌
const List = () => {
  const list = ['item1', 'item2', 'item3'];

  return (
    <ul>
      {list.map((value, index) => {
        return <li key={index}>{value}</li>;
      })}
    </ul>
  );
};

// ✅
const List = () => {
  const list = [
    { id: '111', value: 'item1' },
    { id: '222', value: 'item2' },
    { id: '333', value: 'item3' }
  ];

  return (
    <ul>
      {list.map((item) => {
        return <li key={item.id}>{item.value}</li>;
      })}
    </ul>
  );
};

// ❌
const ActionButtons = ({ text1, text2 }) => {
  return (
    <div>
      <button>{text1}</button>
      <button>{text2}</button>
    </div>
  );
};

// ✅
const Button = ({ text1, text2 }) => {
  return (
    <>
      <button>{text1}</button>
      <button>{text2}</button>
    </>
  );
};

// ❌
const Button = (props) => {
  return <button>{props.text}</button>;
};

// ✅
const Button = (props) => {
  const { text } = props;

  return <button>{text}</button>;
};

// ✅
const Button = ({ text }) => {
  return <button>{text}</button>;
};

// ❌
const ScreenDimensions = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <>
      <p>Current screen width: {windowSize.width}</p>
      <p>Current screen height: {windowSize.height}</p>
    </>
  );
};

// ✅
const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
};

const ScreenDimensions = () => {
  const windowSize = useWindowSize();

  return (
    <>
      <p>Current screen width: {windowSize.width}</p>
      <p>Current screen height: {windowSize.height}</p>
    </>
  );
};

// ❌
const SomeSection = ({ isEditable, value }) => {
  if (isEditable) {
    return (
      <Section>
        <Title>Edit this content</Title>
        <Content>{value}</Content>
        <Button>Clear content</Button>
      </Section>
    );
  }

  return (
    <Section>
      <Title>Read this content</Title>
      <Content>{value}</Content>
    </Section>
  );
};

// ✅
const EditableSection = ({ value }) => {
  return (
    <Section>
      <Title>Edit this content</Title>
      <Content>{value}</Content>
      <Button>Clear content</Button>
    </Section>
  );
};

const DetailSection = ({ value }) => {
  return (
    <Section>
      <Title>Read this content</Title>
      <Content>{value}</Content>
    </Section>
  );
};

const SomeSection = ({ isEditable, value }) => {
  return isEditable ? (
    <EditableSection value={value} />
  ) : (
    <DetailSection value={value} />
  );
};

// ❌
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

// ✅
const [user, setUser] = useState({});

// ❌
<Form hasPadding={true} withError={true} />

// ✅
<Form hasPadding withError />

// ❌
<Title variant={"h1"} value={"Home page"} />

// ✅
<Title variant="h1" value="Home page" />

// ❌
const Title = (props) => {
  return (
    <h1 style={{ fontWeight: 600, fontSize: '24px' }} {...props}>
      {children}
    </h1>
  );
};

// ✅
const useStyles = (props) => {
  return useMemo(
    () => ({
      header: { fontWeight: props.isBold ? 700 : 400, fontSize: '24px' }
    }),
    [props]
  );
};

const Title = (props) => {
  const styles = useStyles(props);

  return (
    <h1 style={styles.header} {...props}>
      {children}
    </h1>
  );
};

const { role } = user;

// ❌
if (role === ADMIN) {
  return <AdminUser />;
} else {
  return <NormalUser />;
}

// ✅
return role === ADMIN ? <AdminUser /> : <NormalUser />;

// ❌
if (role === 'admin') {
  return <AdminUser />;
}

// ✅
enum Roles {
  admin = 'admin',
  basic = 'basic'
}

if (role === Roles.admin) {
  return <AdminUser />;
}

//src/lib/store.ts
export { useDispatch, useSelector } from 'react-redux';

// src/lib/query.ts
export { useQuery, useMutation, useQueryClient } from 'react-query';

// ❌ imperative: dealing with internals of array iteration
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;

for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}

// ✅ declarative: we don't deal with internals of iteration
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sum = arr.reduce((acc, v) => acc + v, 0);

// ❌ Avoid single letter names
const n = 'Max';
// ✅
const name = 'Max';

// ❌ Avoid abbreviations
const sof = 'Sunday';
// ✅
const startOfWeek = 'Sunday';

// ❌ Avoid meaningless names
const foo = false;
// ✅
const appInit = false;

// ❌
function createPerson(firstName, lastName, height, weight, gender) {
  // ...
}

// ✅
function createPerson({ firstName, lastName, height, weight, gender }) {
  // ...
}

// ✅
function createPerson(person) {
  const { firstName, lastName, height, weight, gender } = person;
  // ...
}

// ❌
return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>
);

// ✅
const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>
);

// ❌
const userName = user.firstName + ' ' + user.lastName;

// ✅
const userDetails = `${user.firstName} ${user.lastName}`;

// ❌
const add = (a, b) => {
  return a + b;
};

// ✅
const add = (a, b) => a + b;

// ❌ directly using momemt
import moment from 'moment';

const updateProduct = (product) => {
  const payload = {
    ...product,
    // ❌ we are bound to the moment interface implementation
    updatedAt: moment().toDate(),
  };

  return await fetch(`/product/${product.id}`, {
    method: 'PUT',
    body: JSON.stringify(payload),
  });
};

// ✅ creating the abstraction, a.k.a. helper function which wraps the functionality

// utils/createDate.ts
import moment from 'moment';

export const createDate = (): Date => moment().toDate();

// updateProduct.ts
import { createDate } from './utils/createDate';

const updateProduct = (product) => {
  const payload = {
    ...product,
    // ✅ using the abstracted helper function
    updatedAt: createDate(),
  };

  return await fetch(`/product/${product.id}`, {
    method: 'PUT',
    body: JSON.stringify(payload),
  });
};
view raw

import { FC, createElement } from 'react';

export const wrap =
  <Props extends object, ViewProps extends object>(
    View: FC<Partial<ViewProps>>,
    controllers: Array<(props: Props) => Partial<ViewProps> | null | void>
  ) =>
  (args: Props) =>
    createElement(
      View,
      ...controllers
        .map(
          (useController) => useController(args) as Partial<ViewProps> | null
        )
        .filter(Boolean)
    );

import { useMemo } from 'react';

import { useTodoList } from '../../adapters/todoAdapter';
import { useUserData } from '../../adapters/userAdapter';

export const useTodoController = () => {
  const { user } = useUserData();

  const {
    todos: { isLoading, data }
  } = useTodoList(user.id);

  return useMemo(() => ({ isLoading, todos: data }), [isLoading, data]);
};

import { useTodoController } from './useTodoController';
import { TodoItem } from './components/TodoItem';

import { wrap } from '../../utils/wrap';

import { Todo, TodoList as TodoListType } from '../../../domain/struct/todo';

type TodoListProps = {
  todos: TodoListType;
  isLoading: boolean;
};

const TodoListComponent = ({ todos, isLoading }: TodoListProps) => {
  return isLoading ? (
    <>Loading...</>
  ) : (
    <>
      <ul className="tasks-list">
        {todos.map((todo: Todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </>
  );
};

export const TodoList = wrap(TodoListComponent, [useTodoController]);