React - Props & State

React Component 只能透过资料状态的改变来更新画面，而 React 元件有两种资料来源：

透过外部传进来 component 的 Props
在 component 内部被管理的 State

当 Props 或 State 改变时才会更新画面。

Props - 由外部传入的属性

React 的每个 component 都是 function，我们会在 function 里面放入参数，所以也可以在 React component 放入参数，而在 commponent 的参数就称为 props（即 properties 属性）。
component 接收任意的 props 并回传描述画面的 React element。
props 是 React 父元件和子元件间的桥梁，属性唯独，不能被改变，且只能由上传到下(父传子)。

举个简单的例子：
在 App.js 将 name 属性传递给 Welcome.js 做使用

// App.js
import Welcome from "./Welcome";
function App() {
  return (
      <Welcome name="Mary"/>
  );
}
export default App;

Welcome.js 接收 props

// Welcome.js
import React from 'react'
const Welcome = (props) => {
    return (
        <h1>Hello, {props.name}</h1>
    )
}
export default Welcome

或者也可以解构赋值来接收 props，直接将要传递的属性名称放入参数里面，这样的做法就不用每次都一直写 props 了，也可以比较清楚知道是什麽资料被传进去

// Welcome.js
import React from 'react'
const Welcome = ({ name }) => {
    return (
        <h1>Hello, { name }</h1>
    )
}
export default Welcome

若使用 class component，则要将 render() 内的 props 替换成 this.props：

// Welcome.js
import React, { Component } from 'react';
class Welcome extends Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
}
export default Welcome

无论是使用 function component 或是 class component 最终结果都相同，网页上都会显示 Hello, Mary

State - 状态

可自由读写
只能在 Class Components 中使用，在 function component 则会使用 Hook - useState（下一篇会介绍）。
在 Class component 中的 constructor() 中会使用 this.state 来初始化 State 物件（给预设值），且使用 this.setState() 来更新 State 让画面重新渲染。

例如：

import React, { Component } from "react";
class ClassState extends Component {
  constructor() {
    // super 呼叫 component 的 constructor
    super();
    // count 的初始值设为 0
    this.state = { count: 0 };
  }
  render() {
    return (
      <div>
        <h3>Class component - state</h3>
        <p>You clicked {this.state.count} times</p>
        <button
          onClick={() => {
            // 利用 setState 改变状态，使 component 重新 render
            this.setState({ count: this.state.count + 1 });
          }}
        >
          Click
        </button>
      </div>
    );
  }
}
export default ClassState;

上面的例子因为 constructor() 内 count 初始值设为 0，打开网页会看到画面如下：

利用 this.setState() 改变状态时，点击按钮时画面就会更新，点击几次画面就会被更新几次，下图为点击按钮 10 次後的画面，被点击的次数变成 10。