挑战 React 第十二篇

什么是 React state?

我们上篇有提到，可使用 props 渲染我们要的资讯，但props是唯读的，那万一我要在 component 里改变资讯怎么办？

state 这时候就派上用场。

props Vs state

propsstate传递方式可从父组件传入子组件只能在该component使用，为private唯读？是否，可改变状态Class Component使用方式this.propsthis.statefunction Component使用方式propsuseState Hook

实作範例

目标

Hi Visitor 按下 button 后，讯息变成 Hi Tom

在 app.js 档案里面加入 Hi Component

function App() {  return (    <div className="App">      <Hi />    </div>  );}

新增一个 Hi.js 档案，并新增以下程式码

import React, { Component} from 'react';class Hi extends Component {  render() {    return <h1>Hi Visitor</h1>  }export default Hi

yarn start 第二步骤成果

使用 state ，通常 this.state 会写在 constructor

class Hi extends Component {  constructor() {    super();    //预设讯息为 Hi Visitor    this.state = {      message: "Hi Visitor"    }  }  render() {    //回传 this.state 的预设讯息    return <h1>{this.state.message}</h1>  } }export default Hi  

yarn start 第四步骤结果

新增一个 button 叫做 changeMessage ，此 function 为改变预设 state 的内容

import React, { Component} from 'react';class Hi extends Component {  constructor() {    super();    this.state = {      message: "Hi Visitor"    }  }  changeMessage() {    this.setState({      message: "Hi Tom"    })  }  render(){    return (    <div>      <h1>{this.state.message}</h1>      // es6 arrow function 绑定此class      <button onClick={() => this.changeMessage()}>button</button>    </div>    )  }}export default Hi

yarn start 第六步骤画面

按下「 改变讯息 」按钮，成功看到 Hi Tom

把预设的 Hi Visitor，换成 setState 的讯息

学习心得

此篇为简单的实作，我自己在看官网的时间範本(setState现在的时间取得当前时间的组件)看得蛮吃力的，所以先写稍微简单的一篇讲述什么是state，还有可以看到程式码有写一个注解用es6绑定此class，这个之后会再拉出来一篇特别叙述。