//语法: import {useState} from "react" const [state, setState] = useState(initialState)//数组解构赋值 //useState接收一个initialState变量作为状态的初始值，返回值是一个数组。返回数组的第一个元素代表当前state的最新值，第二个元素是一个用来更新state的函数。state和setState这两个变量的命名是你自己取的 //state用于组件内部使用的数据 //setState函数用于修改state,当修改后会触发所有使用过state的地方重新取值(调用render) //可以用多个useState

import React, { Component,useState } from 'react' export default function Box3() { const [first, setfirst] = useState(0) return ( 
{first}
{setfirst(first+1)}}>点击first+1
 ) }

import {useEffect} from "react" useEffect(effect?=>clean, dependencies?) //useEffect的第一个参数effect是要执行的副作用函数，它可以是任意的用户自定义函数，用户可以在这个函数里面 操作一些浏览器的API或者和外部环境进行交互,网络请求等，这个函数会在每次组件渲染完成之后被调用 //useEffect可以有一个返回值,返回一个函数,系统在组件重新渲染之前调用它 //第二个参数dependencies来限制该副作用的执行条件 

import React,{useEffect,useState} from 'react' export default function Box1(props) { let [i,seti]=useState(0) useEffect(()=>{ console.log(i) let timer=setInterval(() => { seti(i+1) },1000); return ()=>{ clearInterval(timer) } }) return ( 
{i}
 ) }

//父组件 import React,{useState} from 'react' import Box1 from './Box1' export default function Box2() { let [flag,setflag]=useState(true) return ( 
{setflag(!flag)}}>点击销毁/创建Box1 {flag&&} 
 ) }

react import {useRef} from "react" const refObject = useRef(initialValue) //useRef接收initialValue作为初始值，它的返回值是一个ref对象，这个对象的.current属性就是该数据的最新值。使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用 

import { useRef, useEffect } from 'react' import ReactDOM from 'react-dom' const AutoFocusInput = () => { const inputRef = useRef(null) useEffect(() => { // 组件挂载后自动聚焦 inputRef.current.focus() }, []) return (  ) } ReactDOM.render(, document.getElementById('root')) //在上面代码中inputRef其实就是一个{current: input节点}对象，只不过它可以保证在组件每次渲染的时候拿到的都是同一个对象。 

import {useCallback} from "react" const memoizedCallback = useCallback(callback, dependencies) //useCallback接收两个参数，第一个参数是需要被记住的函数，第二个参数是这个函数的dependencies，只有dependencies数组里面的元素的值发生变化时useCallback才会返回新定义的函数，否则useCallback都会返回之前定义的函数。 

import React,{useCallback,useEffect,useState} from 'react' export default function Box7() { let [arr,setarr]=useState([{id:1,name:'ljy'},{id:2,name:'jack'},{id:3,name:'marry'}]) let fn=useCallback((index)=>{ console.log(index) },[]) useEffect(()=>{ console.log('fn变化了') },[fn]) return ( 
<>{arr.map(el=>
{el.id}---{el.name}
)}{setarr([...arr])}}>点击修改数据
 ) } 

import {useMemo} from "react" const memoizedValue = useMemo(() => valueNeededToBeMemoized, dependencies) //useMemo接收一个函数，该函数的返回值就是需要被记住的变量，当useMemo的第二个参数dependencies数组里面的元素的值没有发生变化的时候，memoizedValue使用的就是上一次的值。 

import React, { useMemo } from 'react' import ReactDOM from 'react-dom' const RenderPrimes = ({ iterations, multiplier }) => { const primes = React.useMemo(() => calculatePrimes(iterations, multiplier), [ iterations, multiplier ]) return ( 
 Primes! {primes} 
 ) } ReactDOM.render(, document.getElementById('root')) //例子中calculatePrimes是用来计算素数的，因此每次调用它都需要消耗大量的计算资源。 为了提高组件渲染的性能，我们可以使用useMemo来记住计算的结果， 当iterations和multiplier保持不变的时候，我们就不需要重新执行calculatePrimes函数来重新计算了，直接使用上一次的结果即可。

const value = useContext(MyContext) //useContext接收一个context对象为参数，该context对象是由React.createContext函数生成的。 useContext的返回值是当前context的值，这个值是由最邻近的来决定的。 一旦在某个组件里面使用了useContext这就相当于该组件订阅了这个context的变化， 当最近的的context值发生变化时，使用到该context的子组件就会被触发重渲染，且它们会拿到context的最新值。 

import React, { useContext, useState } from 'react' import ReactDOM from 'react-dom' //定义context const NumberContext = React.createContext() const NumberDisplay = () => { const [currentNumber, setCurrentNumber] = useContext(NumberContext) const handleCurrentNumberChange = () => { setCurrentNumber(Math.floor(Math.random() * 100)) } return ( <>
Current number is: {currentNumber}
Change current number ) } const ParentComponent = () => { const [currentNumber, setCurrentNumber] = useState(100) return (  //这里填儿子组件，后面孙子组件就可以直接使用爷爷组件传递的值  ) } ReactDOM.render(, document.getElementById('root'))

import React, { useContext, useState } from 'react' import ExpensiveTree from 'somewhere/ExpensiveTree' import ReactDOM from 'react-dom' const ThemeContext = React.createContext() const ConfigurationContext = React.createContext() const ChildrenComponent = () => { const [themeContext] = useContext(ThemeContext) return ( 
 ) } const App = () => { const [themeContext, setThemeContext] = useState({ color: 'red' }) const [configurationContext, setConfigurationContext] = useState({ showTips: false }) return (  ) } ReactDOM.render(, document.getElementById('root'))

import React, { useContext, useState } from 'react' import ExpensiveTree from 'somewhere/ExpensiveTree' import ReactDOM from 'react-dom' const AppContext = React.createContext() const ExpensiveComponentWrapper = React.memo(({ theme }) => { return (  ) }) const ChildrenComponent = () => { const [appContext] = useContext(AppContext) const theme = appContext.theme return { 
 ) } const App = () => { const [appContext, setAppContext] = useState({ theme: { color: 'red' }, configuration: { showTips: false }}) return (  ) } ReactDOM.render(, document.getElementById('root')) 

import React, { useContext, useState, useMemo } from 'react' import ExpensiveTree from 'somewhere/ExpensiveTree' import ReactDOM from 'react-dom' const AppContext = React.createContext() const ChildrenComponent = () => { const [appContext] = useContext(AppContext) const theme = appContext.theme return useMemo(() => ( 
 ), [theme] ) } const App = () => { const [appContext, setAppContext] = useState({ theme: { color: 'red' }, configuration: { showTips: false }}) return (  ) } Reac
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：使用vant-uploader上传照片无法删除的解决_vue.js_
                                                                
下一篇：Vant实现上传多个图片或视频,更改视频预览图_vue.js_