【Day04】Component 与 Props

关於 Component

可理解为程序中彼此独立、可重组、拆分、复用的一种积木单元
每个 Component 皆能完整描述自身长相（UI）和逻辑（JS）
React 的 Component 可视为自定义的 HTML 标签，因此字首必须大写，以和原生 HTML 标签区别

两种 Component

Class Component（类元件）

范例：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

搭配生命周期，在生成 Component 到渲染完成，以及回收元件时做不同事情（如获取数据、清除资料等）

Function Component（函式元件）

范例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

比 Class Component 更精简，只要定义一个纯函数，并返回 JSX 即可
函式元件没有生命周期方法，需要借助 react hook 实现
函式元件不能访问 this

关於 props

React 的 component 本质上即是 function，
能够接收任意型别的参数，
而 component 收到的参数，
是撰写 HTML 标签时给予的 properties，
因此称之为「props」。

另外，该 component 的 children
也会跟着 properties 一起打包成一整个 object
作为 props 传递给该 component

props 范例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Props 是唯读的

不管使用 function 或是 class 来宣告 component，都绝不能修改自己的 props
如果要操作、改变输出内容，则要使用「state」

Props 的 children

props 中有个特别的属性 children
可以取得 children element
在 component 无法确定自己的 children 内容时
可以直接使用这个参数

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
	  // 以下内容会作为 props.children 传入 FancyBorder
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
	  // 以上内容会作为 props.children 传入 FancyBorder
    </FancyBorder>
  );
}