Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC 6: createReactClass updates #12036

Merged
merged 6 commits into from
Jan 19, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 64 additions & 8 deletions addons/create-react-class/factory.js
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,27 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
*/
componentWillUnmount: 'DEFINE_MANY',

/**
* Replacement for (deprecated) `componentWillMount`.
*
* @optional
*/
UNSAFE_componentWillMount: 'DEFINE_MANY',

/**
* Replacement for (deprecated) `componentWillReceiveProps`.
*
* @optional
*/
UNSAFE_componentWillReceiveProps: 'DEFINE_MANY',

/**
* Replacement for (deprecated) `componentWillUpdate`.
*
* @optional
*/
UNSAFE_componentWillUpdate: 'DEFINE_MANY',

// ==== Advanced methods ====

/**
Expand All @@ -285,6 +306,23 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
updateComponent: 'OVERRIDE_BASE'
};

/**
* Similar to ReactClassInterface but for static methods.
*/
var ReactClassStaticInterface = {
/**
* This method is invoked after a component is instantiated and when it
* receives new props. Return an object to update state in response to
* prop changes. Return null to indicate no change to state.
*
* If an object is returned, its keys will be merged into the existing state.
*
* @return {object || null}
* @optional
*/
getDerivedStateFromProps: 'DEFINE_MANY_MERGED'
};

/**
* Mapping from class specification keys to special processing functions.
*
Expand Down Expand Up @@ -519,6 +557,7 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
if (!statics) {
return;
}

for (var name in statics) {
var property = statics[name];
if (!statics.hasOwnProperty(name)) {
Expand All @@ -535,14 +574,25 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
name
);

var isInherited = name in Constructor;
_invariant(
!isInherited,
'ReactClass: You are attempting to define ' +
'`%s` on your component more than once. This conflict may be ' +
'due to a mixin.',
name
);
var isAlreadyDefined = name in Constructor;
if (isAlreadyDefined) {
var specPolicy = ReactClassStaticInterface.hasOwnProperty(name)
? ReactClassStaticInterface[name]
: null;

_invariant(
specPolicy === 'DEFINE_MANY_MERGED',
'ReactClass: You are attempting to define ' +
'`%s` on your component more than once. This conflict may be ' +
'due to a mixin.',
name
);

Constructor[name] = createMergedResultFunction(Constructor[name], property);

return;
}

Constructor[name] = property;
}
}
Expand Down Expand Up @@ -852,6 +902,12 @@ function factory(ReactComponent, isValidElement, ReactNoopUpdateQueue) {
'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',
spec.displayName || 'A component'
);
warning(
!Constructor.prototype.UNSAFE_componentWillRecieveProps,
'%s has a method called UNSAFE_componentWillRecieveProps(). ' +
'Did you mean UNSAFE_componentWillReceiveProps()?',
spec.displayName || 'A component'
);
}

// Reduce time spent doing lookups by setting these on the prototype.
Expand Down
2 changes: 1 addition & 1 deletion addons/create-react-class/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "create-react-class",
"version": "15.6.2",
"version": "15.6.3",
"description": "Legacy API for creating React components.",
"main": "index.js",
"license": "MIT",
Expand Down
51 changes: 51 additions & 0 deletions addons/create-react-class/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -522,4 +522,55 @@ describe('ReactClass-spec', () => {
'to prevent memory leaks.'
);
});

it('should support getInitialState mixin', () => {
const Component = createReactClass({
mixins: [{
getInitialState: function(props) {
return {
foo: 'foo'
};
},
}],
getInitialState: function(props) {
return {
bar: 'bar'
};
},
render: function() {
return <div />;
}
});
const instance = renderIntoDocument(<Component />);
expect(instance.state.foo).toEqual('foo');
expect(instance.state.bar).toEqual('bar');
});

it('should merge return values for static getDerivedStateFromProps mixin', () => {
const Component = createReactClass({
mixins: [{
statics: {
getDerivedStateFromProps: function(props, prevState) {
return {
foo: 'foo'
};
}
},
}],
statics: {
getDerivedStateFromProps: function(props, prevState) {
return {
bar: 'bar'
};
}
},
render: function() {
return <div />;
}
});

const state = Component.getDerivedStateFromProps();
expect(state.foo).toEqual('foo');
expect(state.bar).toEqual('bar');
});
});