React和Vue中监听变量变化的方法资源-CSDN下载

42 浏览量 2021-01-19 20:29:19 上传评论收藏 84KB PDF 举报

资源推荐

资源详情

资源评论

React和和Vue中监听变量变化的方法中监听变量变化的方法

React 中中

本地调试本地调试React代码的方法代码的方法

yarn build

场景场景

假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。

16之前之前

在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换

16之后之后

在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedStateFromProps 可以返回

null 或者一个对象，如果是对象，则会更新 state

getDerivedStateFromProps触发条件触发条件

我们的目标就是找到 getDerivedStateFromProps 的触发条件

我们知道，只要调用 setState 就会触发 getDerivedStateFromProps ，并且 props 的值相同，也会触发

getDerivedStateFromProps (16.3版本之后)

setState 在 react.development.js 当中

Component.prototype.setState = function (partialState, callback) {

!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables

to update or a function which returns an object of state variables.') : void 0;

this.updater.enqueueSetState(this, partialState, callback, 'setState');

};

ReactNoopUpdateQueue {

//...部分省略

enqueueSetState: function (publicInstance, partialState, callback, callerName) {

warnNoop(publicInstance, 'setState');

}

}

执行的是一个警告方法

function warnNoop(publicInstance, callerName) {

{

// 实例的构造体

var _constructor = publicInstance.constructor;

var componentName = _constructor && (_constructor.displayName || _constructor.name) || 'ReactClass';

// 组成一个key 组件名称+方法名（列如setState）

var warningKey = componentName + '.' + callerName;

// 如果已经输出过警告了就不会再输出

if (didWarnStateUpdateForUnmountedComponent[warningKey]) {

return;

}

// 在开发者工具的终端里输出警告日志不能直接使用 component.setState来调用

warningWithoutStack$1(false, "Can't call %s on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. '

+ 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the %s component.', callerName,

componentName);

didWarnStateUpdateForUnmountedComponent[warningKey] = true;

}

}

看来 ReactNoopUpdateQueue 是一个抽象类，实际的方法并不是在这里实现的，同时我们看下最初 updater 赋值的地方，初

始化 Component 时，会传入实际的 updater

function Component(props, context, updater) {

this.props = props;

this.context = context;

// If a component has string refs, we will assign a different object later.

this.refs = emptyObject;

// We initialize the default updater but the real one gets injected by the

剩余6页未读，继续阅读

内容反馈

weixin_38653694

粉丝: 9

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip