5分鐘簡單瞭解React-Hooks

首先附上官網正文😀：React Hooks
)

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

簡單講就是說，Hooks是在React 16.8版本中新增加的特性。可以讓你通過不謝一個類class,就可以使用State和其他React特性。
另外使用ReactNative開發的小夥伴需要注意一下，就是在ReactNative 0.59正式版纔開始支持Hooks.

React 16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all packages, including React DOM. React Native supports Hooks since the 0.59 release of React Native.

現在通過寫一個簡單的案例來說明一下，下面代碼中useState方法就是React已經內部實現的hook,是一個狀態鉤子。

1.使用class的方式,通過一個按鈕點擊改變文字

import React, {Component} from 'react'
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native'

export default class demo_class extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: 'this is class demo'
        }
    }
    _changeTheDefaultText = () => {
        this.setState({
            text: 'this is the new text'
        })
    }
    render() {
        const {text} = this.state
        return (
            <View>
                <Text style={{fontSize: 20, color: 'red'}}>{text}</Text>
                <TouchableOpacity onPress={this._changeTheDefaultText}>
                    <Text style={{fontSize: 20, color: 'red'}}>改變文字</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

2.同樣的方式，使用hook來實現

import React, {useState} from 'react'
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native'

const demoHooks = () => {
    // 初始值
    const [text, setText] = useState('this is hook demo')
    // 方法
    _changeTheDefaultText = () => {
        return setText('this is the new text')
    }
    return (
        <View>
            <Text style={{fontSize: 20, color: 'red'}}>{text}</Text>
            <TouchableOpacity onPress={this._changeTheDefaultText}>
                <Text style={{fontSize: 20, color: 'red'}}>改變文字</Text>
            </TouchableOpacity>
        </View>
    )
}

export default demoHooks

通過上面兩個簡單的例子，直觀看使用hook後的代碼數明顯比使用class完成的少，但實現的是同樣的功能。是不是很欣喜呢？

useState()這個函數接受一個初始值作爲參數，和class中this.state設置的值一樣。返回一個數組，數組的第一個成員是我們自定義的變量，就是狀態的當前值，比如，例子中text;第二個成員是一個函數，用來修改state,通常約定set前綴加上自定義狀態的變量名，比如例子中的setText

3.新增加的這個hooks特性，沒有突破性的改變

• 是一個可選項。你完全可以嘗試使用Hooks重寫任何已有代碼
• 100%向後兼容。Hooks並沒有帶來任何突破性的改變。
• hooks只是提供了一個多選項，一個more API,來優化你的代碼， react 官方也沒有打算要完全移除類class