什么是hooks?

  • 官方文档

  • hooks是React v16.8版本提供的一个新特性,我们可以简单的认为它是函数式组件的生命周期,允许我们在不使用 Class 的前提下使用生命周期、state 和其他特性。因为再以前的版本中,函数式组件是没有生命周期的也没有状态(state)的,因此我们之前写组件大多都是用类组件(class),但是相较于类组件,函数组件的本身更加简单,更好的胜任*根据状态来渲染UI这件事,*因此React Hooks应运而生!

  • React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

React 默认常用的钩子：

  1. useState()
  2. useContext()
  3. useReducer()
  4. useEffect()
  5. useMomo()
  6. useRef()
  7. useCallback()

总结

单从形式上看，Hooks 是对函数式组件的增强，使之能与类组件平起平坐，甚至（期望）取而代之。实质意义在于进一步将更多的函数式思想引入到前端领域，比如 Effect、Monad 等。算是在提出v = f(d)的 UI 层函数式思路之后，在这条路上的进一步探索

1. useState()

  • 这是用与保存组件状态的hooks,能够让函数组件拥有自己的状态(state)
// hooks - useState() 给函数组件提供状态以及修改其状态的唯一方法
import React ,{useState}from 'react'

export default function App() {
  // 第一个参数是useState中的状态(数据),第二个参数是修改状态的唯一方法
  const [name,setName] = useState('lam')
  console.log([name,setName]);//输出一个数组,第一项为状态,第二项为修改其状态的唯一方法
  return (
    <div>
        <button onClick={()=>{
            /*
            	一旦调用修改函数,整个页面会重新执行渲染,
            	但是类组件中的setState只会让render重新渲染
            */ 
            setName('肥林')// 这种方法是完全覆盖(即新数据完全覆盖旧数据)并非智能覆盖
        }}>修改名字</button>
        App - {name}
    </div>
  )
}

结果展示:

image

小案例(todoList)

// 使用函数式组件以及hooks写成的todolist案例
// hooks - useState() 给函数组件提供状态以及修改其状态的唯一方法
import React ,{useState}from 'react'

export default function App() {

    const [text, settext] = useState("")//输入框内容
    const [list,setList] = useState(["aa","bb","cc"])//列表展示内容

    // 输入框每一次数据输入驱动状态更新
    const handleChange = (evt)=>{
        // console.log("handleChange",evt.target.value)
        settext(evt.target.value)
    }

    // 点击添加将输入框内容添加到列表展示数据中
    const handleAdd = ()=>{
        console.log('数据添加到列表展示中:',text)

        // 不能直接修改状态list.push("")
        setList([...list,text])

        // 添加成功后清空输入框
        settext("")
    }

    // 删除对应的列表数据
    const handleDel = (index)=>{
        console.log('删除的指定数据index为:',index)
        var newlist = [...list]
        newlist.splice(index,1)
        setList(newlist)
    }
    return (
        <div>
            <input onChange={handleChange}  value={text}/>
            <button onClick={handleAdd}>添加</button>
            {/* 遍历渲染 */}
            <ul>
            {
                // 遍历生成li标签包裹List里面的数据
                list.map((item,index)=>
                <li key={item}>
                    {item}
                    <button onClick={()=>handleDel(index)}>删除</button>
                </li>
                )
            }
            </ul>

            {/* 判断展示 */}
            {!list.length  && <div>暂无待办事项</div>}
        </div>
    )
}

结果展示

image