Day5 State vs Props

前言

State跟Props这两个东西其实不会很难，却很重要，基本上你在写React的日子里都会一直碰到他们，可能会换个形式出现，却永远没有消失，讲到这就可以看出他们的重要性，那我们话不多说，进入主题!

现实案例

这边为了方便各位了解，我说个案例，後面会把State跟Props带入到故事中，方便大家厘清

不知道各位离开学校多久了？笔者刚离开学校满一年(好怀念...)，还记得开学的时候会发课本吗？班长会把厚厚一叠课本放在第一排，然後由第一排往後传递，传到最後一个。但因为你在传递的时候不小心画到其中一本，所以那本就变你的，且别人无法拿到

这边有几个重点:

第一排往後传递，传到最後一个(props)
别人无法拿到(state)

故事编得很烂，我知道...

State

以上面的例子来看state就是不能传递的部分，他只能在单一component内执行，不过如果你透过其他方式把它送出去，当然另当别论，不过单以state来说，他就是单一component的资料，写法如下(function component需搭配hooks所以这边先跳过):

class component

import "./styles.css";
import React from 'react'

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hello: 'hello'
    };
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>{this.state.hello}, world!</h2> 
      </div>
    );
  }
}

export default Hello;

从上面的程序码中，可以看出来我在state里面塞了一个变数叫hello，然後回到页面去使用它(this.state.hello)，基本上state就是这样：在component里面去做宣告，然後只限当前component使用

Props

Props其实就跟传递书本是同样的意思，都是可传递的部分，这边直接上程序码会比较容易了解

class Father extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hello: "hello"
    };
  }
  render() {
    return (
      <div>
        <h1>{this.state.hello}, Child</h1>
        <Child hello={this.state.hello} /> // 这边把state传递到Child
      </div>
    );
  }
}

export default Father;

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.hello}, Father</h1> // 用props接收Father传递过来的hello
      </div>
    );
  }
}

export default Child;

从程序码我们可以看出来Props主要是上层传过来的资料，所以以後看专案後就可以知道哪个是这个页面原生的资料，那个是从上一层传递过来的了

那今天就讲到这边，我们明天见