下面的代码更难阅读

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

const TodoLists = (props) => (

{props.todoList?.map((todo, index) => (
  

    
 props.seeDetail?.(todo)}>
      {todo?.uuid}:{todo.text}
    
    

       props.handleEdit?.(todo, index)}>
        编辑
      
       props.handleDelete?.(todo, index)}
      >
        删除
      
    
  
))}

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

const TodoLists = ({ todoList, seeDetail, handleEdit, handleDelete }) => (

{todoList?.map((todo, index) => (
  

    
 seeDetail?.(todo)}>
      {todo?.uuid}:{todo.text}
    
    

       handleEdit?.(todo, index)}>
        编辑
      
       handleDelete?.(todo, index)}>
        删除
      
    
  
))}

);
export default TodoLists;

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

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

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

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

按钮

推荐写法: 不需要花括号

按钮

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

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