react学习笔记二--组件

组件的使用

名称定义

组件的名称的首字母必须大写，这是为了让react解析的时候分辨是自定义的组件还是html标签。

组件的传值

组件使用props进行传值，如下
父组件用属性的形式进行传值，子组件通过参数进行接收数据。

// 父组件使用子组件
<Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
    
// 子组件接收父组件
    function Avatar({ person, size }) {
  // 在这里 person 和 size 是可访问的
}
// 或者将变量存在一个对象里
function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

组件可以根据参数进行条件渲染

定义组件可以进行条件判断（返回值可以为null！）

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride 的行李清单</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="宇航服" 
        />
        <Item 
          isPacked={true} 
          name="带金箔的头盔" 
        />
        <Item 
          isPacked={false} 
          name="Tam 的照片" 
        />
      </ul>
    </section>
  );
}

组件渲染规则

re-render的规则：状态更改、父级（或子级）重新渲染、context 变化以及 hooks 变化。

1.state修改

state后面会细讲，这个东西相当于vue的data，只要data变了，页面就会重新渲染

2.父组件re-render

父组件的re-render会导致子组件发生re-render，但反过来不会影响。

3.context

当 Context Provider 中的值发生变化时，使用该 Context 的所有组件都要 re-render，即使它们并没有使用发生变化的那部分数据。这些 re-render 并不能直接通过 memoize 来避免掉，但是可以用一些变通的方法来避免

4.hooks

hooks包括很多东西，其中就有state和context。

注意

props不会导致组件重新渲染，因为真正让他重新渲染的是useMomo