下面的代码更难阅读

不好的写法: 下面的代码更难阅读（特别是在项目较大时）。

const TodoLists = (props) => (
<div className="todo-list">

{props.todoList?.map((todo, index) => (
  <div className="todo-list-item" key={todo.uuid}>
    <p onClick={() => props.seeDetail?.(todo)}>
      {todo?.uuid}:{todo.text}
    </p>
    <div className="todo-list-item-btn-group">
      <button type="button" onClick={() => props.handleEdit?.(todo, index)}>
        编辑
      </button>
      <button
        type="button"
        onClick={() => props.handleDelete?.(todo, index)}
      >
        删除
      </button>
    </div>
  </div>
))}

</div>
);
export default TodoLists;
推荐写法: 下面的代码更加简洁。

const TodoLists = ({ todoList, seeDetail, handleEdit, handleDelete }) => (
<div className="todo-list">

{todoList?.map((todo, index) => (
  <div className="todo-list-item" key={todo.uuid}>
    <p onClick={() => seeDetail?.(todo)}>
      {todo?.uuid}:{todo.text}
    </p>
    <div className="todo-list-item-btn-group">
      <button type="button" onClick={() => handleEdit?.(todo, index)}>
        编辑
      </button>
      <button type="button" onClick={() => handleDelete?.(todo, index)}>
        删除
      </button>
    </div>
  </div>
))}

</div>
);
export default TodoLists;

5. 设置 props 的默认值时，在解构时进行
   不好的写法: 你可能需要在多个地方定义默认值并引入新变量。

const Text = ({ size, type }) => {
const Component = type || "span";
const comSize = size || "mini";
return <Component size={comSize} />;
};
推荐写法，直接在对象解构里给出默认值。

const Text = ({ size = "mini", type: Component = "span" }) => {
return <Component size={comSize} />;
};

6. 传递字符串类型属性时删除花括号。
   不好的写法：带花括号的写法

<button type={"button"} className={"btn"}>
按钮
</button>
推荐写法: 不需要花括号

<button type="button" className="btn">
按钮
</button>

7. 在使用 value && <Component {...props}/> 之前确保 value 值是布尔值，以防止显示意外的值。
   不好的写法: 当列表的长度为 0，则有可能显示 0。

const DataList = ({ data }) => {
return <Container>{data.length && <List data={data} />}</Container>;
};
推荐写法: 当列表没有数据时，则不会渲染任何东西。