React深入浅出分析Hooks源码_React_

function App() { const [num, setNum] = useState(0); const add = () => { setNum(num + 1); }; return ( 
数字: {num}
 +1 
 ); } 

function useState(initialValue) { var value = initialValue function setState(newVal) { value = newVal } return [value, setState] } 

const MyReact = (function() { // 定义一个 value 保存在该模块的全局中 let value return { useState(initialValue) { value = value || initialValue function setState(newVal) { value = newVal } return [value, setState] } } })() 

function App() { const [name, setName] = useState('Kevin'); const [age, setAge] = useState(0); const handleName = () => { setNum('Dom'); }; const handleAge = () => { setAge(age + 1); }; return ( 
姓名: {name}
 改名字 
年龄: {age}
 加一岁 
 ); } 

const MyReact = (function() { // 开辟一个储存 hooks 的空间 let hooks = []; // 指针从 0 开始 let currentHook = 0 return { // 伪代码 解释重新渲染的时候 会初始化 currentHook render(Component) { const Comp = Component() Comp.render() currentHook = 0 // 重新渲染时候改变 hooks 指针 return Comp }, useState(initialValue) { hooks[currentHook] = hooks[currentHook] || initialValue const setStateHookIndex = currentHook // 这里我们暂且默认 setState 方式第一个参数不传 函数，直接传状态 const setState = newState => (hooks[setStateHookIndex] = newState) return [hooks[currentHook++], setState] } } })() 

import React, { useState, useEffect } from 'react'; function App() { const [name, setName] = useState('Kevin'); const [age, setAge] = useState(0); const handleName = () => { setName('Don'); }; const handleAge = () => { setAge(age + 1); }; useEffect(()=>{ console.log('useEffect_execute') }, [age]) return ( 
姓名: {name}
 改名字 
年龄: {age}
 加一岁 
 ); } export default App;

const MyReact = (function() { // 开辟一个储存 hooks 的空间 let hooks = []; // 指针从 0 开始 let currentHook = 0 ； // 定义个模块全局的 useEffect 依赖 let deps; return { // 伪代码 解释重新渲染的时候 会初始化 currentHook render(Component) { const Comp = Component() Comp.render() currentHook = 0 // 重新渲染时候改变 hooks 指针 return Comp }, useState(initialValue) { hooks[currentHook] = hooks[currentHook] || initialValue const setStateHookIndex = currentHook // 这里我们暂且默认 setState 方式第一个参数不传 函数，直接传状态 const setState = newState => (hooks[setStateHookIndex] = newState) return [hooks[currentHook++], setState] } useEffect(callback, depArray) { const hasNoDeps = !depArray // 如果没有依赖，说明是第一次渲染，或者是没有传入依赖参数，那么就 为 true // 有依赖 使用 every 遍历依赖的状态是否变化， 变化就会 true const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true // 如果没有依赖， 或者依赖改变 if (hasNoDeps || hasChangedDeps) { // 执行 callback() // 更新依赖 deps = depArray } }, } })()

import React, { useState, useEffect } from 'react'; function App() { const [name, setName] = useState('Kevin'); const [age, setAge] = useState(0); const handleName = () => { setName('Don'); }; const handleAge = () => { setAge(age + 1); }; useEffect(() => { setInterval(() => { setAge(age + 1); console.log(age) }, 1000); }, []); return ( 
姓名: {name}
 改名字 
年龄: {age}
 加一岁 
 ); } export default App;

 // 通过监听 age 的变化。来重新执行 useEffect 内的函数 // 因此这里也就需要记录定时器，当卸载的时候我们去清空定时器，防止多个定时器重新触发 useEffect(() => { const id = setInterval(() => { setAge(age + 1); }, 1000); return () => { clearInterval(id) }; }, [age]);

useEffect(() => { setInterval(() => { setAge(age => age + 1); }, 1000); }, []); 

// 以下是伪代码 // 这里用 dva 发送请求来模拟 import React, { useState, useEffect } from 'react'; import { connect } from 'dva'; function App(props) { const { goods， dispatch, page } = props; useEffect(() => { // 页面完成去发情请求 dispatch({ type: '/goods/list', payload: {page, pageSize:10}, }); // xxxx }, [props]); return ( 
商品: {goods}
点击切下一页
 ); } export default connect(({ goods }) => ({ goods, }))(App);

const Dispatcher={ useReducer: mountReducer, useState: mountState, // xxx 省略其他的方法 } 

function mountState( initialState: (() => S) | S, ): [S, Dispatch>] { /* mountWorkInProgressHook 方法 返回初始化对象 { memoizedState: null, baseState: null, queue: null, baseUpdate: null, next: null, } */ const hook = mountWorkInProgressHook(); // 如果传入的是函数 直接执行，所以第一次这个参数是 undefined if (typeof initialState === 'function') { initialState = initialState(); } hook.memoizedState = hook.baseState = initialState; const queue = (hook.queue = { last: null, dispatch: null, lastRenderedReducer: basicStateReducer, lastRenderedState: (initialState: any), }); /* 定义 dispatch 相当于 const dispatch = queue.dispatch = dispatchAction.bind(null,currentlyRenderingFiber，queue); */ const dispatch: Dispatch< BasicStateAction, > = (queue.dispatch = (dispatchAction.bind( null, // Flow doesn't know this is non-null, but we do. ((currentlyRenderingFiber: any): Fiber), queue, ): any)); // 可以看到这个dispatch就是dispatchAction绑定了对应的 currentlyRenderingFiber 和 queue。最后return： return [hook.memoizedState, dispatch]; }

function dispatchAction(fiber: Fiber, queue: UpdateQueue, action: A) { //... 省略验证的代码 const alternate = fiber.alternate; /* 这其实就是判断这个更新是否是在渲染过程中产生的，currentlyRenderingFiber只有在FunctionalComponent更新的过程中才会被设置，在离开更新的时候设置为null，所以只要存在并更产生更新的Fiber相等，说明这个更新是在当前渲染中产生的，则这是一次reRender。所有更新过程中产生的更新记录在renderPhaseUpdates这个Map上，以每个Hook的queue为key。对于不是更新过程中产生的更新，则直接在queue上执行操作就行了，注意在最后会发起一次scheduleWork的调度。 */ if ( fiber === currentlyRenderingFiber || 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

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

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

                

                                            
上一篇：天天酷跑糖白虎怎么抽奖_天天酷跑抽奖必中糖白虎小技巧分享_手机游戏_游戏攻略_
                                                                
下一篇：vue3中使用Apache ECharts的详细方法_vue.js_