【React】Props

向组件传递参数（Props）

Passing Props to a Component | React 中文文档 | React 中文网

props 就是用于和其他组件交流，父组件都可以传递信息给子组件，传递的信息内容包含了 objects, arrays, functions. 基本什么都可以传

向组件传递参数（Props）

父组件向子组件传递元素

子组件接受元素

使用JSX的拓展语法去传递props值

将JSX当作子组件传递

How props change over time

---

父组件向子组件传递元素

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

子组件接受元素

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

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

后面的写法是我们常规的写法，这种语法被称为“解构”，等价于从函数参数读取属性。

第一种写法可以方便我们设置默认值

function Avatar({ person, size = 100 }) {
  // ...
}

这种写法的默认值只有在 size={undefined} 的时候可以使用，但是如果是传入size={null} 和 size={0}则默认值不会被使用。

使用JSX的拓展语法去传递props值

有时候传值写法会十分的重复冗余

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

为了使得代码更加的简洁，可以使用下面的方法进行传值

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

这种写法最主要是直接传递，因为在第二个function中他并不使用这个值，但是并不能什么都使用这个值，因为有时候你中间修改过prop里的值再传递的话，那么就很容易出问题了，这也是文档中所说的原则：

Use spread syntax with restraint. If you’re using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!

将JSX当作子组件传递

这个写法倒之前没有遇到过，就是把组件当作值传入，觉得是一种高级的写法

<Card>
  <Avatar />
</Card>

App.js

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>
  );
}

Avatar.js

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

一开始会有一点confused的，因为这样的写法其实好像和下面的写法好像没什么不同。

    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>

最主要是实例的代码给的没有那么的复杂，其实前面的那种写法就是将上面的这个整个函数传递另一个函数去渲染了，也就是我在表皮层不做

   <div className="card">

 这件事，而是直接使用JSX的写法

<Card>
  <Avatar />
</Card>

这样整个代码看起来就十分的整洁，而这个过程中就相当于将整一个子模块传递到Card函数内，再进行传值渲染（感觉这里表达的不好，大概意思吧）。当然文档说就填洞，你想填什么都行

You can think of a component with a children prop as having a “hole” that can be “filled in” by its parent components with arbitrary JSX. You will often use the children prop for visual wrappers: panels, grids, and so on. You can explore this in more detail in Extracting Layout Components.

How props change over time

这个标题是文档的啦，其实最主要想说一件事就是

props are immutable—a term from computer science meaning “unchangeable.”

也就是说，他自己是永远不会变的，但是如果你希望他变，那么你就需要自己去从父组件更新一个值，他自己才会重新渲染

When a component needs to change its props (for example, in response to a user interaction or new data), it will have to “ask” its parent component to pass it different props—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.

这些基础的原理还是得了解一下得吧，正常情况下我们是不能直接修改props的，即使是父组件也是，因为会很麻烦的，涉及到一些通讯。这个时候就要用到 state了。