From e5209dbd7e99f0b064cc70d5bf23f372619c8d76 Mon Sep 17 00:00:00 2001 From: Julien Le Coupanec Date: Sun, 18 Mar 2018 22:38:17 -0700 Subject: [PATCH] React: react.component methods and properties --- frontend/react.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) diff --git a/frontend/react.js b/frontend/react.js index 346ad4e..0ca9fc8 100644 --- a/frontend/react.js +++ b/frontend/react.js @@ -71,6 +71,114 @@ React.Fragment * ******************************************************************************************* */ +class Component extends React.Component { + // Will be called before it is mounted + constructor(props) { + // Call this method before any other statement + // or this.props will be undefined in the constructor + super(props); + + // The constructor is also often used to bind event handlers to the class instance. + this.method = this.method.bind(this); + + // The constructor is the right place to initialize state. + this.state = { + active: true, + + // In rare cases, it’s okay to initialize state based on props. + // This effectively “forks” the props and sets the state with the initial props. + // If you “fork” props by using them for state, you might also want to implement componentWillReceiveProps(nextProps) + // to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone. + color: props.initialColor + }; + } + + // Enqueues changes to the component state and + // tells React that this component and its children need to be re-rendered with the updated state. + // setState() does not always immediately update the component. It may batch or defer the update until later. + // This makes reading this.state right after calling setState() a potential pitfall. + // Instead, use componentDidUpdate or a setState callback. + // You may optionally pass an object as the first argument to setState() instead of a function. + setState(updater[, callback]) { } + + // Invoked just before mounting occurs (before render()) + // This is the only lifecycle hook called on server rendering. + componentWillMount() { } + + // Invoked immediately after a component is mounted. + // Initialization that requires DOM nodes should go here. + // If you need to load data from a remote endpoint, this is a good place to instantiate the network request. + // This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount(). + componentDidMount() { } + + // Invoked before a mounted component receives new props. + // If you need to update the state in response to prop changes (for example, to reset it), + // you may compare this.props and nextProps and perform state transitions using this.setState() in this method. + componentWillReceiveProps(nextProps) { } + + // Let React know if a component’s output is not affected by the current change in state or props. + // The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. + // shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. + // This method is not called for the initial render or when forceUpdate() is used. + // Returning false does not prevent child components from re-rendering when their state changes. + shouldComponentUpdate(nextProps, nextState) { } + + // Invoked just before rendering when new props or state are being received. + // Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render. + // Note that you cannot call this.setState() here; nor should you do anything else + // (e.g. dispatch a Redux action) that would trigger an update to a React component before componentWillUpdate() returns. + // If you need to update state in response to props changes, use componentWillReceiveProps() instead. + componentWillUpdate(nextProps, nextState) { } + + // Invoked immediately after updating occurs. This method is not called for the initial render. + // Use this as an opportunity to operate on the DOM when the component has been updated. + // This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed). + componentDidUpdate(prevProps, prevState) { } + + // Invoked immediately before a component is unmounted and destroyed. + // Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, + // or cleaning up any subscriptions that were created in componentDidMount(). + componentWillUnmount() { } + + // Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, + // log those errors, and display a fallback UI instead of the component tree that crashed. + // Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. + componentDidCatch() { } + + // This method is required. + // It should be pure, meaning that it does not modify component state, + // it returns the same result each time it’s invoked, and + // it does not directly interact with the browser (use lifecycle methods for this) + // It must return one of the following types: react elements, string and numbers, portals, null or booleans. + render() { + // Contains the props that were defined by the caller of this component. + console.log(this.props); + + // Contains data specific to this component that may change over time. + // The state is user-defined, and it should be a plain JavaScript object. + // If you don’t use it in render(), it shouldn’t be in the state. + // For example, you can put timer IDs directly on the instance. + // Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. + // Treat this.state as if it were immutable. + console.log(this.state); + + return

Hello, {this.props.name}

; + } +} + +// Can be defined as a property on the component class itself, to set the default props for the class. +// This is used for undefined props, but not for null props. +Component.defaultProps = { + color: 'blue' +}; + +component = new Component(); + +// By default, when your component’s state or props change, your component will re-render. +// If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate(). +// Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). +component.forceUpdate(callback) + /* ******************************************************************************************* * TYPECHECKING WITH PROPTYPES