dataIndex, name: '分数：' + score });});chart1.on('mouseout', function (params) { chart1.dispatchAction...type: 'highlight', name: gender });});chart2.on('mouseout', function (params) { chart2.dispatchAction...score }); }); chart1.on('mouseout', function (params) { chart1.dispatchAction...gender }); }); chart2.on('mouseout', function (params) { chart2.dispatchAction...) { var age = params.value[0]; var score = params.value[1]; chart3.dispatchAction
在上面讲到，useState在初始化时会返回[state, dispatchAction]，那我们调用setState()方法，实际上就是调用dispatchAction，而且这个函数在初始化时还通过bind...来看下我精简后的dispatchAction（去除了和setState无关的代码）function dispatchAction(fiber, queue, action) { // 创建一个update...前面dispatchAction讲到会把update加入到hook.queue中，在这里的newHook.queue上就有这个update。...当我们通过setState也就是dispatchAction进行调度更新时，会创建一个update加入到hook.queue中。...返回update后的[newState, dispatchAction].还有两个问题为什么setState后不能马上拿到最新的state的值？
image.png 保存实例备用 首先我们要知道想让地图轮播高亮就需要用到eharts自带的dispatchAction[3]API，而这个API是要用eharts实例去使用的,所以在vue中我们要将一开始地图初始化的实例给保存下来...this.mTime = setInterval(() => { // 清除之前的高亮 this.charts.dispatchAction...在mapActive()中先获取这个地图所有城市的数量dataLength，因为dispatchAction是根据下标来进行高亮切换的如果我们的index数量大于城市数量他就不会显示了，所有我们要控制inedx...再使用我们的实例调用eharts的方法来实现高亮和提示框弹出，其中dispatchAction接收几个参数,type表示你要呈现的类型，比如高亮或者提示框，具体的可以在官网[4]看到。...this.mTime = ''; console.log(this.mTime); this.charts.dispatchAction
在源码中，他被称为dispatchAction。...既然这条update链表是由某个useState的dispatchAction产生，那么这条链表显然属于该useState hook。 我们继续补充hook的数据结构。...可见，updateNum方法即绑定了currentlyRenderingFiber与queue（即hook.queue）的dispatchAction。...上文已经介绍，调用dispatchAction的目的是生成update，并插入到hook.queue链表中。...既然queue作为预置参数已经绑定给dispatchAction，那么调用dispatchAction就步仅局限在FunctionComponent内部了。
function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction...}); app.currentIndex = (app.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction...seriesIndex: 0, dataIndex: app.currentIndex }); // 显示 tooltip myChart.dispatchAction
seriesName: 'myLegend' }, function(params) { if (params.color === '#CCC') { myChart.dispatchAction...itemStyle.color = colorList[params.dataIndex]; myChart.setOption(option); } else { myChart.dispatchAction...seriesName: 'legendSeries' }, function(params) { if (params.color === '#CCC') { myChart.dispatchAction...监听处理自制图例的鼠标滑过事件 myChart.on('mouseover', { seriesName: 'legendSeries' }, function(params) { myChart.dispatchAction...}); }); myChart.on('mouseout', { seriesName: 'legendSeries' }, function(params) { myChart.dispatchAction
hook.queue.pending = null;//重置update链表 } hook.memoizedState = baseState;//赋值新的state return [baseState, dispatchAction.bind...(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action
legendselectchanged', function (arg) { console.log(arg) console.log('图例选择发生了改变...') })echartsInstance.dispatchAction...主动触发某些行为, 使用代码模拟用户的行为// 触发高亮的行为 mCharts.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex...: 1}) // 触发显示提示框的行为 mCharts.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: 3})echartsInstance.clea
返回新的状态和dispatchAction传入queue参数 function useState(initialState) { //第1步：创建hook或取到hook let hook;...传入queue参数 return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 } 接下来定义mountWorkInProgressHook...workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook; } 第四步：定义dispatchAction...则将创建的这个update加入queue.pending的环状链表中 1 让isMount=false，并且赋值workInProgressHook，调用schedule进行更新渲染 function dispatchAction...(null, hook.queue)];//useState的返回 } return { useState }; })(); function dispatchAction(queue
), }); const dispatch: Dispatch<//创建dispatch函数 BasicStateAction, > = (queue.dispatch = (dispatchAction.bind...reducer, lastRenderedState: (initialState: any), }); const dispatch: Dispatch = (queue.dispatch = (dispatchAction.bind...Dispatch = (queue.dispatch: any); return [hook.memoizedState, dispatch]; } 执行阶段 useState执行setState后会调用dispatchAction...，dispatchAction做的事情就是讲Update加入queue.pending中，然后开始调度 function dispatchAction(fiber, queue, action) {
lastRenderedState: (initialState: any), }); /* 定义 dispatch 相当于 const dispatch = queue.dispatch = dispatchAction.bind...currentlyRenderingFiber，queue); */ const dispatch: Dispatch, > = (queue.dispatch = (dispatchAction.bind...((currentlyRenderingFiber: any): Fiber), queue, ): any)); // 可以看到这个dispatch就是dispatchAction绑定了对应的...最后return： return [hook.memoizedState, dispatch];}dispatchAction 源码function dispatchAction(fiber:..., lastRenderedState: (initialState: any), }); const dispatch: Dispatch = (queue.dispatch = (dispatchAction.bind
返回新的状态和dispatchAction传入queue参数function useState(initialState) { //第1步：创建hook或取到hook let hook;...传入queue参数 return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 }接下来定义mountWorkInProgressHook...workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook;}第四步：定义dispatchAction...则将创建的这个update加入queue.pending的环状链表中 图片让isMount=false，并且赋值workInProgressHook，调用schedule进行更新渲染function dispatchAction...(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action
isSet2 = false clearInterval(_this2.startCharts) // 取消之前高亮的图形 mCharts2.dispatchAction...', seriesIndex: 0, dataIndex: currentIndex2 }) // 高亮当前图形 mCharts2.dispatchAction...seriesIndex: 0, dataIndex: param.dataIndex }) // 显示 tooltip mCharts2.dispatchAction...var dataLen = mCharts2.getOption().series[0].data.length //计算总的数组长度 // 取消之前高亮的图形 mCharts2.dispatchAction...seriesIndex: 0, dataIndex: currentIndex2 }) // 显示 tooltip mCharts2.dispatchAction
}); //这边又是一个连等赋值 const dispatch: Dispatch< BasicStateAction, > = (queue.dispatch = (dispatchAction.bind...action(state) : action; } (5) 注意下dispatchAction()的使用： dispatchAction.bind( //注意，因为 FunctionComponent...setName表示dispatch，注意，这里 setName 只是形参，并没有赋值给 dispatch (7) 此时的name 为'chen'，当点击 div，调用setName('jin')时，会执行dispatchAction...('jin')函数，我们来看下dispatchAction源码 二、dispatchAction() 作用： (1) 新建 update 对象：{action:'jin'} (2) 将 update 加至...七、useState流程图 image.png 八、GitHub mountState/dispatchAction/renderWithHooks/updateState/updateReducer：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
