Month: June 2019

ReactJS – Functional and Class Components

tl;dr

ReactJS是一个由脸书(Facebook)在2013年所发布的UI library. ReactJS鼓吹以零件式(component-based) 的架构, 创建网站的前端. 可以想象成建构前端就像玩乐高(Lego)一样, 你所见到的按键(buttons), 链接(links), 页面(page), 输入(input), 截面(section), 段落(paragraph)或图像(images)等等, 都可以变成一个个独立的小零件, 然后在把它们进行组装. 以达到界面重用(Reusable UI component).

接下来, 是给想入手ReactJS的一些个人看法. 基本要求:
* HTML, CSS, JavaScript (ES 6)

#1 Component

Class Component

import React, { Component } from "react"

Class Sample extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isActive: false
    }

    // 重点, 如果,不bind.当你click那个button,就会有error.
    // 不信, 你可以试试 😂
    this.handleToggleStatus.bind(this)
  }

  handleToggleStatus() {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  render() {
    return (
      <>
        <button 
          onClick={this.handleToggleStatus} 
          style={{ backgroundColor: this.props.buttonColor || "#ffffff" }}
         >
           {this.state.isActive ? "Activated" : "Deactivated" }
        </button>

        // 这会是同样的一个按键,不过backgroundColor是红色的
        <Sample buttonColor={this.state.isActive ? "#ff0000" : "#ffffff" } />
      </>
    )
  }
}

如上所示, 每按一下按键(button), 字眼Activated和Deactivated就会跳动更换.

class component 也可以叫stateful component. 在class component里头你可以通过setState, 以更改component的state(状态). 每一个setState都会重新执行render(). 界面(UI)就会更新.

除了state, props的更新也会刷新界面(UI). 在上面的示范, 按键的backgroundColor会因为this.props.buttonColor的不同而改变.

Class component可以运用ReactJS的component’s lifecycle

一个component的state, 可以是其他component的props.

Tips 1: 为什么要bind ?
Tips 2: ReactJS 的Class/Stateful component的概念与Flutter的Stateful Widget是一样的.
Tips 3: <>...</>这个syntax是React Fragment的shorthand

Functional Component

import React from "react";

function Sample(props) {
  return <button {...props}>...</button>
}

在ReactJS 16.8版本之前, functional component又称Stateless component. 因为你只能通过props刷新界面(UI). 没有state和setState.

在ReactJS 16.8版本之后, 就有了React Hooks. React Hooks缩小了class component和functional component之间的差别. 简而言之, 你可以在functional component里头, 使用setState的概念. 如下,

import React, { useState } from "react"

function Sample(props) {
  // 顺序很重要, [value, function]
  // 第一个, 是value
  // 第二个, 是function
  const [isActive, setIsActive] = useState(false);

  function handleToggleStatus() {
    setIsActive(prevState => !prevState)
  }

  return (
    <button onClick={handleToggleStatus} >
      {isActive ? "Activated" : "Deactivated"}
    </button>
  )
}

See the Pen Functional Component and Hooks by Yik Kok (@yikkok-yong) on CodePen.

Tips 4: Functional/Stateless component的概念和Flutter的Stateless Widget是一样的.
Tips 5: Functional component里面不会需要this, 自然也不需要bind
Tips 6: React Hooks目前还未能完全取代class component

结语

Functional component 和 class component都有各自的好. 没有绝对. 视情况而使用. (只有更好, 没有最好)