React Hooks钩子中API的使用示例分析_React_

import React, { useState } from 'react' export default function UseState() { let [count,setCount]=useState(10) // 他是异步的操作，在页面数据会进行更新，但是下面打印的数据是没有更新，原因是因为他是异步的 const plus=()=>{ setCount(count+5) } return ( 
 {/* 函数组件中没有this指向，我们可以直接调用 */} 
{count}
setCount(count++)}>加加plus
 ) }

useEffect(()=>{ 逻辑}) 页面数据只要更新就会触发useEffect() useEffect(()=>{},[]) useEffect() 只执行一次，只有页面第一次加载的时候触发，componentDidMount useEffect(()=>{}, [num,count]) 监听数据改变执行，num和count发生变化的时候触发。compoentDidUpdate useEffect(()=>{ return ()=>{ console.log("相当于compoentDidUnmount") } },[]) //回调函数返回函数，返回的函数相当于销毁生命周期函数。

import React, { useMemo, useState } from 'react' export default function UseState() { let [count,setCount]=useState(10) // useMemo必须有返回值，而且他是在dom更新发生变化，比useEffect执行的快，useEffect是dom更新完才执行的，监听count值变化 const double=useMemo(()=>{ console.log('useMemo触发'); return count+6 },[count]) return ( 
 {/* 函数组件中没有this指向，我们可以直接调用 */} 
{count} {double}
setCount(count*2)}>count二倍
 ) }

//useMemoe缓存组件 function Home() { let [count,setcount] = useState(10) let [num,setnum] = useState(20) //通过useMemoe对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。 let theme = useMemo(()=>{ return (  ) },[count]) return ( 
count--{count}
setcount(count+1)}>count++
num--{num}
setnum(num+1)}>num++
 {theme} 
 ) } function Theme(props){ useEffect(()=>{ console.log("子组件渲染") }); return ( 
子组件接受数据{props.count}
 ) }

function Home() { let [count,setcount] = useState(10) let [num,setnum] = useState(20) return ( 
count--{count}
setcount(count+1)}>count++
num--{num}
setnum(num+1)}>num++
 ) } //通过memo对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。 const Theme = memo((props)=>{ useEffect(()=>{ console.log("子组件渲染") }); return ( 
子组件接受数据{props.count}
 ) })

function Home() { let [count,setcount] = useState(10) let [num,setnum] = useState(20) const handlerCount = ()=>{ console.log(count); } const callback = useCallback(()=>{ handlerCount(); },[count]); return ( 
count--{count}
setcount(count+1)}>count++
num--{num}
setnum(num+1)}>num++
 ) } //通过memo对组件进行缓存，避免父组件中根子组件无关数据更新导致子组件的重新渲染。 const Theme = memo((props)=>{ useEffect(()=>{ console.log("子组件渲染") }); return ( 
子组件接受数据{props.count}
props.handle()}>点击
 ) })

import React, { useContext, useState } from 'react'; //useContext用于获取context状态树的值 // 首先创建一个空的context对象 const ThemContext =React.createContext(); function UseState() { let [color,setColor]=useState('#ff0000') return ( 
 {/* 通过Provider传过来一个value值，是一个对象 */} setColor('pink')}>粉色setColor('blue')}>蓝色setColor('green')}>绿色
 ) } // 子组件 function Son(props) { // 通过useContext获取父组件传过来的值 const context=useContext(ThemContext) return ( 
 {/* 然后对他进行样式绑定 */} 
hello,react
 ) } export default UseState

 //创建一个ref对象的内容 let inp = useRef(null); const setVal =()=>{ console.log(inp.current.value); } 

function Home() { //定义一个初始化变量 let inpRef = useRef(null); const getTheme = ()=>{ console.log(inpRef); 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

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

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

                

                                            
上一篇：Vue生命周期函数调用详解_vue.js_
                                                                
下一篇：react使用axios实现上传下载功能_React_