ใน React Component คุณสมบัติหนึ่งที่ทำให้ React ทำงานได้เร็วก็คือการที่สามารถอัพเดต UI แยกแต่ละส่วนได้ จึงไม่ต้อง Render หน้าเว็บใหม่ทั้งหมด โดยการอัพเดตของ Component จะทำงานตามการเปลี่ยนแปลงของข้อมูลหรือก็คือ State นั่นเอง

ทำความรู้จักกับ State 

ดูจากชื่อแล้ว ‘State’ ก็น่าจะเป็น ‘สถานะ’ อะไรสักอย่าง แต่ว่าสถานะของอะไร ? แล้วจะมีสถานะไว้ทำไม ? 

ในที่นี้มันก็คือ ‘สถานะ’ ตามชื่อของมันจริงๆ ซึ่งอยู่ในรูปของข้อมูล ‘ณ ขณะนั้น’ ของ Component แต่ละตัว ถ้า ‘สถานะ’ มีการเปลี่ยนแปลง Component นั้นก็จะถูก render ใหม่อัตโนมัติ โดยจะอยู่ในรูปแบบของ Object ที่ built-in มาตอนเราสร้าง Class Component ซึ่งสามารถใช้งานและจัดการได้ภายใน Component มาเริ่มทำความรู้จักจากโค้ดตัวอย่าง Class Component ชื่อว่า Me ซึ่ง return ข้อความง่ายๆกลับออกไป

See the Pen
React State by BorntoDev-Dev (@BorntoDev-Dev)
on CodePen.

ประกาศค่า

จะเห็นว่าในโค้ดตัวอย่างได้มีการกำหนดค่า 2 อย่างคือ name และ datetime ไว้ในส่วนของ constructor ของ Class 

this.state = {
  name: "Dora",
  datetime: Date()
};

ค่าที่เราประกาศจะอยู่ใน { } ถ้าเขียน JavaScript มาบ้างก็น่าจะนึกออกว่ามันเหมือนกันการกระกาศ Object ธรรมดาๆใน JavaScript นั่นเอง เพราะ State ก็เป็นแค่ Object นั่นแหละเพียงแต่ React ออกแบบให้ Object นี้มีความสามารถเพิ่มมากขึ้นเท่านั้นเอง เราจึงสามารถเพิ่มค่า properties ไว้ได้เท่าที่เราต้องการ

เรียกใช้งาน

ตอนประกาศค่าเราทำเหมือน Object ธรรมดา ตอนที่จะเรียกค่ามาใช้ก็เช่นเดียวกัน จากโค้ดตัวอย่างจะเห็นว่ามีการเรียกใช้ name และ datetime ในฟังก์ชัน render ด้วยการใช้ this.state.propertyName

render() {
  return (
    <div>
      <h1>My name is {this.state.name}</h1>
      <h2>({this.state.datetime})</h2>
    </div>
  );
}

ในการใช้งานจริงถ้ามีการเรียกค่าใน State ตัวเดิมซ้ำหลายครั้งเราอาจจะประกาศตัวแปรใหม่ให้เรียกใช้งานสั้นลงก็ได้

render() {
  let name = this.state.name;
  let datetime = this.state.datetime;
  return (
    <div>
      <h1>My name is {name}</h1>
      <h2>({datetime})</h2>
    </div>
  );
}

หรือจะให้สั้นลงอีกหน่อยก็อาจจะใช้ Destructuring ใน ES6 ที่เป็นพื้นฐานของ React มาช่วยก็ได้เหมือนกัน

render() {
  let {name, datetime} = this.state;
  return (
    <div>
      <h1>My name is {name}</h1>
      <h2>({datetime})</h2>
    </div>
  );
}

อัพเดตค่า

จากการที่เป็น built-in Object มากับ React Component เราจึงต้องใช้งานให้ถูกต้องตามที่ React ออกแบบไว้ นั่นคือเราต้องไม่ทำการเปลี่ยนค่า State โดยตรงอย่างเด็ดขาด ! เพราะจะทำให้การทำงานของ Component ไม่เป็นไปตามขั้นตอนที่ควรจะเป็น เช่นการที่ Component นั้นจะไม่ถูก render ใหม่ตอนที่ State เปลี่ยนแปลง เวลาจะอัพเดตค่าจึงควรทำผ่านคำสั่ง this.setState()

// ต้องทำแบบนี้
this.setState({datetime: Date()});
  
// แบบนี้ห้ามเด็ดขาด
this.state.datetime = Date();

สมมติว่าเราจะอัพเดตค่า datetime เมื่อคลิกปุ่ม ทำให้ถูกต้องผ่าน setState เมื่อคลิกปุ่ม datetime ก็จะเปลี่ยนค่าและ Component จะถูก render ใหม่อัตโนมัติ

See the Pen
React State-change state (DO) by BorntoDev-Dev (@BorntoDev-Dev)
on CodePen.

ถ้าเปลี่ยนค่าโดยตรง ซึ่งไม่ควรทำโดยเด็ดขาด ค่าก็จะไม่อัพเดตตาม

See the Pen
React State-change state (DON’T) by BorntoDev-Dev (@BorntoDev-Dev)
on CodePen.

setState ทำงานแบบ Asynchronous

แถมอีกเรื่องเกี่ยวกับการใช้ setState ก็คือ setState ทำงานแบบ Asynchronous ก็คือเมื่อเราสั่ง this.setState โปรแกรมจะทำงานคำสั่งต่อไปโดยไม่ได้รอให้ค่าเปลี่ยนเสร็จ ถ้าหากเราใช้ setState หลายๆครั้งในเวลาเดียวกันหรือใกล้กันมาก React อาจจะยุบรวมเหลือเพียงครั้งเดียว ทำให้การ setState ที่อ้างอิงค่า state หรือ props เก่าอาจจะทำงานไม่ถูกต้อง เช่นการอัพเดต state โดยบวกเพิ่มด้วยค่า props ที่รับเข้ามา

ตัวอย่างโค้ดจาก https://reactjs.org/docs/state-and-lifecycle.html

// ไม่ควรใช้แบบนี้
this.setState({
  counter: this.state.counter + this.props.increment,
});

เราสามารถแก้ปัญหาจากการ Async ได้ด้วยการใช้ setState อีกแบบหนึ่งก็คือส่ง function เข้าไปแทน object ซึ่งจะมี argument 2 ตัวให้ใช้งานคือ state ก่อนหน้า และ props ถ้าเราอ้างอิงจาก 2 ตัวนี้ก็จะเปลี่ยนค่าได้อย่างถูกต้อง

// ใช้ function ในการ setState
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

ส่งท้าย

จากตัวอย่างที่ใช้มาทั้งหมดจะเป็น Class Component ที่มี State ติดมาตอนที่ extends React.Component ทำให้บางครั้งเราเรียกว่า Stateful Component และเรียก Funtional Component ว่า Stateless Component เพราะไม่มี State ให้ใช้งาน แต่ว่า React ก็มีการอัพเดต Funcional Component ให้สามารถใช้งานได้นานแล้วโดยมาใน React Hook ให้ทำงานหลายๆอย่างได้เหมือนกัน Class Component มากขึ้น ถ้าใครสนใจสามารถอ่านต่อได้ที่ลิงค์นี้เลย https://reactjs.org/docs/hooks-intro.html

ข้อมูลอ้างอิงจาก

https://reactjs.org/docs/state-and-lifecycle.html