RFC: Should createClass be considered legacy? #6811

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
3 participants
@jimfb
Contributor

jimfb commented May 19, 2016

If we want to do this.

+author: jimfb
+---
+
+Historically, popular frameworks had to build their own class systems, because Javascript didn’t have a built-in class system. Starting in React v0.13, we announced that we would be switching to standard Javascript constructs. We began supporting javascript classes before the standard `class` specification was even officially finalized. In June of last year, the Javascript standards committee approved ES2015, which officially added classes to the Javascript language specification. If you haven’t already started transitioning away from `React.createClass`, now is the time! We are officially classifying `React.createClass` as legacy, and recommending that people move toward standard constructs like functions and classes.

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

Should be “JavaScript” (both capitalized)

@gaearon

gaearon May 19, 2016

Member

Should be “JavaScript” (both capitalized)

+ return <div>Hello {this.props.name}</div>;
+ }
+ componentDidMount() {
+ // we can override a lifecycle method.

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

I’d change this to // We can define a lifecycle method
“Override” gives a wrong connotation that it’s defined in the base class and you must call super, which is not true.

@gaearon

gaearon May 19, 2016

Member

I’d change this to // We can define a lifecycle method
“Override” gives a wrong connotation that it’s defined in the base class and you must call super, which is not true.

+You can get an overview of the differences in our [React 0.13-beta blog post](/react/blog/2015/01/27/react-v0.13.0-beta-1.html) and our [Reusable Components documentation](/react/docs/reusable-components.html#es6-classes). If you are migrating your existing codebase from `createClass` to standard javascript classes, you might find [Kris Jordan’s Migration Guide](http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes) helpful.
+
+## Stateless Functional Components
+If your components are stateless and functional (ideally, most of your components should be), then you can define your component as a simple function. A Stateless Functional Component (sometimes referred to as an “SFC” on the internet), is just a render function that takes in props and returns JSX.

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

Maybe “and returns a React element”?

@gaearon

gaearon May 19, 2016

Member

Maybe “and returns a React element”?

+}
+```
+
+Stateless functional components are a convenient syntax for lightweight components. They can also be optimized within the React core to follow slightly faster code paths and use less memory. However, they don’t have a backing instance, so you can’t attach a ref to the component, and there is no `this` object upon which to store internal state.

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

“they can also be optimized”—let’s avoid setting the wrong expectation, people have been bitten by something like this where we say they will eventually get faster in theory, and people take it as if something like PureRenderMixin gets applied to them automatically, which is far from truth.

@gaearon

gaearon May 19, 2016

Member

“they can also be optimized”—let’s avoid setting the wrong expectation, people have been bitten by something like this where we say they will eventually get faster in theory, and people take it as if something like PureRenderMixin gets applied to them automatically, which is far from truth.

+
+Stateless functional components are a convenient syntax for lightweight components. They can also be optimized within the React core to follow slightly faster code paths and use less memory. However, they don’t have a backing instance, so you can’t attach a ref to the component, and there is no `this` object upon which to store internal state.
+
+You can read more about Stateless Functional Components in our [Reusable Components documentation](/react/docs/reusable-components.html#stateless-functions)

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

Missing period

@gaearon

gaearon May 19, 2016

Member

Missing period

+ constructor(props) {
+ super(props);
+ }
+ render() {

This comment has been minimized.

@gaearon

gaearon May 19, 2016

Member

I think it would be valuable to use the opportunity to also display how state and event handlers work here.

@gaearon

gaearon May 19, 2016

Member

I think it would be valuable to use the opportunity to also display how state and event handlers work here.

@sebmarkbage

This comment has been minimized.

Show comment
Hide comment
@sebmarkbage

sebmarkbage May 20, 2016

Member

Err.. Not ready for this yet.

Member

sebmarkbage commented May 20, 2016

Err.. Not ready for this yet.

@sebmarkbage sebmarkbage changed the title from Document that createClass is now legacy. to RFC: Should createClass be considered legacy? May 20, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment