The timer case before modification

function Clock(props){
  return(
    <div>
      <h2>Current time {new Date().tolocaletimeString ()}</h2>
    </div>
  );
}

function getTime() {
  ReactDOM.render(
    <Clock date={new Date()} / >.document.getElementById('root'))}setInterval(getTime, 1000);
Copy the code

We want to code the Clock component to update itself only once, so we need to use state, which is private and completely controlled by the current component

Use state to implement self-updating of components

Modify function components to class components

class Clock extends React.Component {
    render(){
      return(
        <div>
          <h2>The current time {this. Props. Date. ToLocaleTimeString ()}</h2>
        </div>)}}// Create Clock class using React.Compant
// Create a render function
// Migrate the React object returned by the function component to the new render function
// Change the position of the props to this.props
Copy the code

Use local state inside the component

1. Replace this.props. Date with this.state.date in render()

class Clock extends React.Component {
    render(){
      return(
        <div>
          <h2>The current time {this. State. The date. ToLocaleTimeString ()}</h2>
        </div>)}}Copy the code

2. Add a class constructor and assign an initial value to this.state in that function

class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {date:new Date(a)}; }render(){
      return(
        <div>
          <h2>The current time {this. State. The date. ToLocaleTimeString ()}</h2>
        </div>)}}Copy the code

3. Remove the date attribute from the element

function getTime() {
  ReactDOM.render(
    <Clock />.document.getElementById('root'))}Copy the code

Service life cycle

/ / mount componentDidMount
/ / uninstall componentWillUnmount
class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {date:new Date(a)}; }/ / a mount
  componentDidMount() {
    this.timeId = setInterval(
      () = >this.getTime(),1000)}/ / unloading
  componentWillUnmount() {
    clearInterval(this.timeId)
  }
  getTime() {
    this.setState({
      date: new Date()}); }render(){
    return(
      <div>
        <h2>The current time {this. State. The date. ToLocaleTimeString ()}</h2>
      </div>
    )
  }
}
ReactDOM.render(
  <Clock />.document.getElementById('root'));// When reactdom.render is executed, the Clock component is loaded
// Component execution loads the constructor first, initializing this.state
// Execute the render function in the component to update the DOM render output
ComponentDidMount getTime() is executed every second when the component is mounted to the page.
// The Clock component is updated with the setState method, and React recalls the render function to render the new data
// Execute the componentWillUnmount declaration cycle function when the page is unmounted
Copy the code

How to modify state

You need to use this.setState instead of this

The constructor is the only place you can assign a value to this.state

constructor(props){
    super(props);
    this.state = {date:new Date(a)}; }Copy the code

Updates to State can be asynchronous

SetState () receives a function instead of an object

this.setState((state, props) = > ({
  counter: state.counter + props.increment
}));
Copy the code

State updates are merged

When state contains multiple independent variables, the variables can be updated separately