React hooks

hooks

函数组件用来管理自己的State，是react 16.8的新增特性，

useState

让函数组件拥有自己的State
import { useState } from 'react’

计数器示例

import React, { useState } from 'react'
import { render } from 'react-dom'

const Counter = () => {
	// 解构赋值
	const [count, setCount] = useState(0)
	const [title, setTitle] = useState('hello')
	return (
		<div>
			// setCount的参数就是一个新值
			<button onClick={() => { setCount(count - 1) }}>-</button>
			<span>{count}</span>
			<button onClick={() => { setCount(count + 1) }}>-</button>
		</div>
	)
}
render(
	<Counter />,
	document.querySelector('#root')

注：useState有两个参数，第一个是初始值(state)，第二个是匿名函数(setState)。useState赋的值可以与匿名函数动态绑定

useEffect

其参数是一个回调，在组件挂载和更新时就会调用这个回调方法，相当于DidMount和DidUpdate

import { useEffect } from 'react

import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'

const Counter = () => {
	// 解构赋值
	const [count, setCount] = useState(0)
	const [title, setTitle] = useState('hello')
	useEffect(() => {
		document.title = `You clicked ${count} times`;
	}
	return (
		<div>
			<button onClick={() => { setCount(count - 1) }}>-</button>
			<span>{count}</span>
			<button onClick={() => { setCount(count + 1) }}>-</button>
		</div>
	)
}
render(
	<Counter />,
	document.querySelector('#root')

注：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。