React | Hook

最新推荐文章于 2023-05-25 09:39:49 发布

置顶

jensonliu

最新推荐文章于 2023-05-25 09:39:49 发布

阅读量240

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_38765789/article/details/107488760

版权

本文探讨了React Hook的引入原因，详细介绍了useState、useEffect、useContext、useReducer等基础API的使用。通过示例展示了如何在组件间传递数据，以及如何利用useRef和自定义Hook进行DOM操作和方法调用。同时，对比了Hook与Class Component在数据处理上的差异，指出Hook中数据以快照形式存储可能导致的问题及其解决方案。

摘要由CSDN通过智能技术生成

前言:为什么用Hook?

在一些需求和业务变得复杂的情况下,传统的class component 的几个缺陷:

组件变得复杂和难以维护：
满天class导致的热重载和性能问题：
class自身具有的复杂度和组件嵌套过深props层级传递

Hook 基础 API

useState

useEffect

使用useEffect

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


function Hook(props){
   

    const [count, setCount] = useState(0)
    const [name, setName] = useState('heaven')
  
    // 监听count
    useEffect(() => {
   
      document.title = `counterWithHook ${
     count}`
      console.log(`the count is ${
     count}`)
    }, [count])
  
    // 监听name
    useEffect(() => {
   
      console.log('you name is', name)
    }, [name])

    // []作参数，相当于mounted
    useEffect(()=>{
   
      console.log('不监听state,全局只执行一次useEffect')
    },[])

    // 自定义函数
    function handleSubmitName(){
   
      alert(`success submit name ${
     name}`);
    }

    return (
      <div>
        <h3>Counter with Hook</h3>
        <p>You click {
   count} times</p>
        <button onClick={
   e => setCount(count => count + 1)}>Click me</button>
        
        <p>
          <input placeholder="输入姓名" onChange={
   e => setName(e.target.value)} />
          <span>your name is {
   name}</span>
          <button onClick={
   handleSubmitName}>提交</button>
        </p>
      </div>
      );
}


export default Hook;

useContext

数据在父组件和子孙组件不再需要一层层传递，demo

// 第一步：创建需要共享的context
export const ThemeContext = React.createContext('light');

const App = ()=>{
   
    // 第二步：使用 Provider 提供 ThemeContext 的值，Provider所包含的子树都可以直接访问ThemeContext的值
   return (
     <ThemeContext.Provider value="dark">
       <Toolbar />
     </ThemeContext.Provider>
   );
}

// Toolbar 组件并不需要透传 ThemeContext
function Toolbar(props) {
   
    return <ThemedButton />;
}

function ThemedButton(props) {
   
  // 第三步：使用共享 Context
  const theme = useContext(ThemeContext)
  return <h1