React Hooks(函数组件)

简介

Hooks是函数组件钩入React State及生命周期等特性的函数。
不能在class函数中使用

特点

1，无需修改组件结构的情况下复用状态逻辑
2，组件中的互关联部分可拆分成更小的函数
3，更简洁，更易理解的代码

状态钩子 useState

const [book, setBook] = useState('')
const [books, setBooks] = useState(['vue', 'react'])

副作用钩子 useEffect

第二个参数是依赖，[]只触发一次
清除工作，防止内存泄漏：return function(){... ...}

    useEffect(() => {
        console.log('effect')

        return function () {
            console.log('unEffect')
        }
    }, [])

useContext

用于快速在函数组件中导入上下文

userReducer

useState的可选项，常用于复杂状态，类似redux中的reducer的概念。

代码

import React, { useState, useEffect, useContext } from 'react';

const Context = React.createContext()

// 函数组件-HooksTest
function HooksTest() {
    const [book, setBook] = useState('')
    const [books, setBooks] = useState(['vue', 'react'])

    useEffect(() => {
        console.log('effect')

        return function () {
            console.log('unEffect')
        }
    }, [])

    return <Context.Provider value={{ books, setBooks }}>
        {
            book === '' ? '请选择' : `您选择的是：${book}`
        }
        <BookList books={books} handleBook={setBook} />
        <AddBook />
        {/* <AddBook onAddBook={book => setBooks([...books, book])} /> */}
    </Context.Provider>
}

// 函数组件-图书列表
function BookList({ books, handleBook }) {
    return <ul>
        {
            books.map((item, index) => (
                <li onClick={() => handleBook(item)} key={index}>{item}</li>
            ))
        }
    </ul>
}

// 函数组件-添加图书
function AddBook({ onAddBook }) {
    const [book, setBook] = useState('')
    const { books, setBooks } = useContext(Context)

    return <div>
        <input value={book} onChange={e => setBook(e.target.value)} onKeyDown={e => {
            if (e.key === 'Enter') {
                // onAddBook(book)
                setBooks([...books, book])
                setBook('')
            }
        }} />
    </div>
}

export default HooksTest