5分钟简单了解ReactHooks

36次阅读

共计 1796 个字符，预计需要花费 5 分钟才能阅读完成。

首先附上官网正文????：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, 是一个状态钩子。

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>
        )
    }
}

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