11-lifecycle-methods.html

<!doctype html>

<title>11 Lifecycle Methods - React From Zero</title>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app"></div>

<script type="text/babel">
// If we use component classes, our components inherit
// a bunch of methods, which get called by React at specific
// times to allow us to get more control over our components
// a few of them we already met in lesson 9
// Here are a few new ones. Not all, but the most important ones

var TRANSLATION_FROM_SOMEWHERE = "Text from a synchronous source.";

var MyComponent = createReactClass({
  // This method is for default prop values
  // it gets called before the props are given to our component
  // the "real" props override them if there are any
  getDefaultProps: function() {
    return {
      iGetOverriden: "default",
      iStayAsIAm: "default"
    };
  },

  // This method is called before a component got mounted to the DOM
  // it returns values that are used for this.state
  getInitialState: function() {
    return { serverData: null };
  },

  // This method gets called right before the component is mounted
  // can be used to initialize some synchronous configuration, that
  // should be available before the component renders
  componentWillMount: function() {
    this.TEXT = TRANSLATION_FROM_SOMEWHERE;
  },

  // This method will be called right after the component got mounted
  // it's a good place to start some asynchronous tasks.
  // For example on the first mount it shows a loading message
  // then componentDidMount is called and gets some server data.
  componentDidMount: function() {
    var component = this;

    // We clean up the data and get new from somewhere
    function loadData() {
      component.setState({ serverData: null });

      getServerData(function(data) {
        component.setState({ serverData: data });
      });
    }

    // Initial data load
    loadData();

    // We simulate a server request every 4 seconds
    this.updateInterval = setInterval(loadData, 4000);
  },

  // This method will be called before the component gets removed from
  // the DOM a bit like a destructor. Here we can do some cleanup.
  componentWillUnmount: function() {
    clearInterval(this.updateInterval);
  },

  // This method is called before a render when new props or state is
  // available. It won't be called on the first render or if
  // this.forceUpdate() is used. It can be used if some state or prop
  // changes don"t require a rerender.
  shouldComponentUpdate: function(nextProps, nextState) {
    // we want to render on every change, this is the default behavior
    return true;
  },

  render: function() {
    return (
      <h2 style={{ width: 400, margin: "auto" }}>
        Overriden Prop: {this.props.iGetOverriden}
        <br />
        <br />
        Default Prop: {this.props.iStayAsIAm}
        <br />
        <br />
        {this.TEXT}
        <br />
        <br />
        {this.state.serverData ? this.state.serverData : "Loading..."}
      </h2>
    );
  }
});

function getServerData(fn) {
  setTimeout(function() {
    fn("Data Loaded!");
  }, 700);
}

ReactDOM.render(
  <MyComponent iGetOverriden={"override"} />,
  document.getElementById("app")
);
</script>