react hooks

最新推荐文章于 2025-08-19 21:27:19 发布

原创最新推荐文章于 2025-08-19 21:27:19 发布 · 296 阅读

1 ·

CC 4.0 BY-SA版权

1.1 State Hooks 的使用

useState是react自带的一个hook函数，它的作用是用来声明状态变量。

先来看一下声明的方式，代码如下

useState这个函数接收的参数是状态的初始值(Initial state)，它返回一个数组，这个数组的第0位是当前的状态值，第1位是可以改变状态值的方法函数。所以上面的代码的意思就是声明了一个状态变量为todos，并把它的初始值设为空数组，同时提供了一个可以改变数组的状态值的方法函数。

接下我们以todolist为例子，看看如何使用

import React,{useCallback, useState} from 'react'


const TodoList = () => {
	const [todos,setTodos] = useState([])

	const addTodo = useCallback((todo) =>{
       setTodos(todos => [...todos,todo] )
	})

	return(
	   <div className="todo-list">
		  <Control addTodo={addTodo}/>   
		  <Todos removeTodo={removeTodo} toggleTodo={toggleTodo}/>
	   </div>
	)
}

export default TodoList

我们用State声明了一个todo的列表，是数组类型，接下来的操作就是我们对数组进行操作，假设现在我们有两个组件，Control组件是todolist的头部，用来添加todo，Todos组件用来展示，或者是删除等操作，我们通过todos进行展示，通过设置的setTodos进行todo的设置，addTodo方法是用来添加todo，我们添加todo，并用setTodos进行设置，将添加的新的todo追加到后面，我们继续往下看，实现removeTodo（此方法用来删除todo）以及togotodo（此方法用来对todo做标记）

    const removeTodo = (id) =>{
        setTodos(todos => todos.filter((todo)=>{
			return todo.id !== id
		}))
	} 

	const toggleTodo = (id) =>{
        setTodos(todos => todos.map((todo)=>{
			return todo.id === id
			    ?{
				    ...todo,
				    complete: !todo.complete
				 }
				:todo
		}))
	}

removeTodo方法是用来移除我们不需要的todo，他接收一个id，也就是我们不需要的通道的标记，我们通过这个标记去清除todo，通过setTodo方法todo进行重新设置；toggleTodo方法我们也接收一个参数id，通过id对todo进行标记，我们去判断传递过来的id与todo里面的id是否相等，如果想等，那么我们将todo的complete设置一下，通过判断complete的值进行标记，接下来我们继续看

1.2 Callback Hooks 和 Momo Hooks的使用

useCallback和use主要用来解决使用React hooks产生的无用渲染的性能问题，

先来看一下声明的方式，代码如下：

const back = useCallback(()=>{},[])

两个Hook的作用都是为了节省性能的消耗，语法也是一样的，不同的是useCallback缓存的是函数，而useMemo是缓存变量

它们都是接收两个参数，第一个参数是函数，第二个参数是数组，后面是依赖的变量

	const addTodo = useCallback((todo) =>{
       setTodos(todos => [...todos,todo] )
	},[])

因为我们的三个函数是要传递给子组件的，所以我们要用useCallback包起来节约性能，因为这里没有使用useMemo，举个例子来看看useMemo是如何作用的

import React , {useState} from 'react';

function ChildComponent({name,children}){
	function change111(name){
			console.log('111')
			return name+'222'
	}

	const action = change111(name) 
	return (
			<>
					<div>{action}</div>
					<div>{children}</div>
			</>
	)
}

function Hello(){
    const [one , setOne] = useState('111')
    const [two , setTwo] = useState('222')
    return (
        <>
            <button onClick={()=>{setOne(new Date().getTime())}}>111</button>
            <button onClick={()=>{setTwo(new Date().getTime()+',222')}}>222</button>
            <ChildComponent name={one}>{two}</ChildComponent>
        </>
    )
}

export default Hello

这个是没有使用过的，当我们点击222按钮的时候，111的方法都会对应执行，这样的话就非常损耗性能，所以我们对应这个做一些优化我们用useMemo将子组件的方法包起来，当点击111的时候执行才执行111的方法

1.3 Ref Hooks 的使用

useRef的主要作用是获取React JSX中的DOM元素，控制对DOM元素的操作，还有一个作用就是用来保存变量

下面我们来看下Control组件的代码

const Control = (props) => {
	const { addTodo } = props
    const inputRef = useRef()

    const onSubmit = (e) => {
      e.preventDefault()
      const newText = inputRef.current.value.trim()
      console.log(newText)
      if(newText.length === 0){
        return
      }
      addTodo({
				id:++idSeq,
				text:newText,
				complete:false
			})
      
      inputRef.current.value=''
    }
    return (
      <div className="control">
        <h1>todos</h1>
        <form onSubmit={onSubmit}>
          <input 
            type='text' 
            className="new-todo" 
            placeholder="what needs to be done" 
            ref={inputRef}></input>
        </form>
      </div>
    )
}

我们在Control组件中接收参数addTodo方法，我们给todolist的头添加一个标题和一个form表单，表单里面包含input输入框，当我们输入按回车的时候因为我们需要提交，可以通过获取的dom节点的值进行todo的添加。之后我们去写添加之后todo是如何进行渲染的，下面来看下Todos的

代码

	const {todos,removeTodo,toggleTodo} = props
	return (
		<ul>
			{
				todos&&todos.map((todo)=>{
                   return <TodoItem
                            key={todo.id}
                            todo={todo}
                            removeTodo={removeTodo}
                            toggleTodo={toggleTodo}
                            ></TodoItem>
				})
            } 
		</ul>

这个组件中，我们接收到3个参数，因为list也有很多，所以为了方便我们新开一个组件，我们将接到的todos参数进行遍历，将方法和每一项传出去，接下来我们在TodoTtem中接受，代码如下：

const TodoItem = (props) => {
	const {
    todo:{
      id,
      text,
      complete
    },
    removeTodo,
    toggleTodo
  } = props

  const onChange = () =>{
    toggleTodo(id)
  }

  const onRemove = () =>{
    removeTodo(id)
  }


  return(
    <li className="todo-item">
      <input
        type="checkbox" 
        onChange={onChange} 
        checked={complete}
      />
      <label className={complete?'complete':''}>{text}</label>
      <button onClick={onRemove}>&#xd7;</button>
    </li>
  )
}

在这个里面我们放一个单选框，一个标签，还有一个按钮，进行操作，我们的的标记和删除功能是通过id进行操作的。所以，我们在操作时会比对id。

为了在刷新浏览器的时候依然可以看到我们添加的记录，我们需要使用本地缓存LoaclStorage。

1.4 Effect Hooks 的使用

useEffect的主要作用是相当于class组件的声命周期函数，在我们进行初次显示的时候可以进行页面的渲染

先来看一下声明的方式，代码如下：

   useEffect(()=> {},[])

他接收两个参数，但是他没有返回值,首先是接受一个函数，后面是他所依赖的变量数组，如果没有依赖的变量，后面可以放一个空的数组。下面看下LocalStorage如何进行存储的

useEffect(() => {
	const todos = JSON.parse(localStorage.getItem(LS_KEY || '[]'))
    setTodos(todos)
}, [])

useEffect(() => {
	localStorage.setItem(LS_KEY,JSON.stringify(todos))
}, [todos])

好了，以上就是整个todolist的方法了以及思路了。