React组件规范

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

这是React清风拂面系列第四篇，上一篇请看这里

组件是构成UI的基本元素
一个组件包含HTML、CSS和JS。
常见的组件库有Chakra UI、[Material UI]和[Ant design]
在React里面,组件是一个函数。
- 函数名首字母大写
- 函数返回JSX

JSX书写规范

返回单根元素

如果React组件里面返回多个元素，需要用单个父元素将它们包裹起来。

下面是错误的代码

<h1>Hedy Lamarr's Todos</h1>
<img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
>

可以用<div>包裹，也可以用<>(React fragment)

+ <>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  />
+ </>

标签必须闭合

在写HTML的时候，标签没有闭合，浏览器会给你做兼容，但是React里面标签一定要闭合，必然会报错

属性尽量用驼峰写法。

JSX最终转为JS对象，JSX中的属性会变成对象中的key的，对于key如果用下划线比如obj.my_name这种就会出错，所以尽量用驼峰写法。

还有一些如class字段是保留关键字，所以React改成了className

JSX语法类似于HTML，但是又有不同，可以通过html2jsx来进行转换。

花括号规范

React里面处理字符串可以用单引号也可以用双引号
花括号{}的主要作用可以在JSX里面执行js，因此可以用来获取变量，逻辑判断等操作

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

在JSX里面用花括号有2种方式
1. 当做文本直接嵌入在JSX标签里面。<h1>{name}'s To Do List</h1> 而不是 <{tag}>Gregorio Y. Zara's To Do List</{tag}>
2. 当做属性. src={avatar} 而不是src="{avatar}"
在花括号里面传CSS样式，需要包装成对象

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  );
}

上面的代码里面style接受了css的属性，在jsx里面需要以对象的形式传进去

props规范

父组件传值给子组件通过props对象。

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

可以直接通过props对象拿到

function Avatar(props) {
    const {person,size} = props
  // person and size are available here
}

也可以用解构语法

function Avatar({person,size=100}) {
    const  = props
}

除了js数据结构，还可以传整个组件，用children变量标记

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

上面Card函数包含了jsx传过来的子组件，用children变量保存，具体代码这里

条件渲染

JSX里面可以用逻辑运算符
不能用if判断，可以直接用三元运算符{cond ? <A /> : <B />}
也可以用逻辑运算符{cond && <A />}

数组渲染

在ES6里面，数组多个函数比如forEach，map等，最大的区别是一种是改变数组本身，一种是返回新的数组。

在React编程思想中提到，React更偏向纯函数，因此在数组遍历的时候，我们更多采用map，filter等方法。

const people = [{
  id: 0,
  name: 'name0',
}, {
  id: 1,
  name: 'name1',
}];

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>{person.name}</li>
  );
  return <ul>{listItems}</ul>;
}

列表的每一个子项都有一个key，主要的目的就是为了记录两次渲染之间子元素的变化，用于提高性能，所以这个key是非常重要的一个字段