1.Introduction of state

the fact that the Clock sets up a timer and updates the UI every second should be an implementation detail of the .
事实上组件的功能和更新UI的代码应该是组件自己的具体实现细节。 ReactDOM.render( <Clock />,document.getElementById('root') ); 为了实现上述的代码，我们需要为组件增加state。 State is similar to props,but it is private and fully controlled by the component. State和props很相似，但是state是私有的，完全由组件控制。 Wementioned beforethat components defined as classes have some additional features. Local state is exactly that: a feature available only to classes. state是一个只在class定义的组件里面才有的新特性。

 
 2.将function转换成Class

 
 
  
   
    
      Create anES6 classwith the same name that extendsReact.Component.
  
      Add a single empty method to it calledrender().
  
      每一个Class类型的组件都要有一个render（）方法。
  
      Move the body of the function into therender()method.
  
      Replacepropswiththis.propsin therender()body.
  
      在render()方法中，props要用this.props来代替
  
      Delete the remaining empty function declaration.
  
    
    
    
  
    
    
    
  
    
   class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello,world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
} 
   
 
   
 
   
  
 

  
3.给Class添加local state 
 
  
   
   我们将用下面的三步来完成date从props到state的过程： 
   
   
   1.在render()方法中，用this.state.date来代替this.props.date 
   
   
   
  
   
   
   
 
   
  
 
 
  
   
    
   class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello,world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
} 
   
 
   
 
   
   
   2.添加一个class的构造函数来初始化this.state，并且我们把props传进了基础的构造函数。 
   
   
    
   class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello,249)">3.Remove thedateprop from the<Clock />element 
   
   
   
 
   
   
  class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello,world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,document.getElementById('root')
); 
  
 
   
   
  
   
  
 4.添加生命周期方法到Class中 
 
 
  
   
   We want to 
   set up a timer 
   whenever the 
   is rendered to the DOM for the first time. This is called "mounting" in React. 
   
 
  
 
   
   我们希望给Class安装一个计时器，可以知道Class什么时候第一渲染到DOM里面。这在React叫做mounting 
   
   
   We also want toclear that timerwhenever the DOM produced by theClockis removed. This is called "unmounting" in React.
  
   
   
   我们也希望当这个Class的node被remove的时候能清除这个计时器。这叫做unmounting。 
   
   
   这些方法叫做生命周期钩子。 
   
   
   componentDidMount() { } 这个钩子在组件输出被渲染到DOM之后run。这里set计时器很好。
 componentWillUnmount() { }
  
   
   
    
    componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),1000
    );
  }注意我们将timerID保存在this里面。 
   
   
   Whilethis.propsis set up by React itself andthis.statehas a special meaning,you are free to add additional fields to the class manually if you need to store something that is not used for the visual output. 
   
   
   尽管this.props由React自己设置，this.state有特殊的意义。我们可以添加其他的filed到class，只要我们需要存储的东西不会用在视觉输出里面。 
   
   
   上面的翻译简直不是人话。意思是 
   
   
   If you don't use something inrender(),it shouldn't be in the state.
  
   
   
   如果我们需要保存的东西不会被用在render()方法中，也就是不会用在视觉输出中，那么这些东西就不应该被保存在state里面。 
   
   
    
    Finally,we will implement thetick()method that runs every second. 
    It will usethis.setState()to schedule updates to the component local state: 最后我们用this.setState()方法来更新组件本地的state。 
   
   
   
  
   class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello,249)">调用流程： 
   
   
   1.Whenis passed toReactDOM.render()component. Sinceneeds to display the current time,it initializesthis.statewith an object including the current time. We will later update this state. 
  
 
   
   2.React then calls theClockcomponent'srender()method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the's render output. 
  
 
   
   
  
   
   
   When theoutput is inserted in the DOM,React calls thecomponentDidMount()lifecycle hook. Inside it,thecomponent asks the browser to set up a timer to calltick()once a second. 
  
 
   
   4.Every second the browser calls thetick()method. Inside it,theClockcomponent schedules a UI update by callingsetState()with an object containing the current time. Thanks to thesetState()call,React knows the state has changed, and callsmethod again to learn what should be on the screen. This time,this.state.datein therender()method will be different,and so the render output will include the updated time. React updates the DOM accordingly. 
  
 
   
   
  
   
   
   5.If thecomponent is ever removed from the DOM,React calls thecomponentWillUnmount()lifecycle hook so the timer is stopped. 
  
 
   
   
  
   
   
   
  
   
 
 
 5.正确的使用State 
 
 
  
   
   1.不要直接改变state 
   
  
 
 
  
   
    
     
    // Wrong
this.state.comment = 'Hello'; 
    
 
    我们要改变state，用setState这个方法 
    
    
    
  
    
    
     
    // Correct
this.setState({comment: 'Hello'}); 
     
     
  
     
    The only place where you can assign 
    this.state 
    is the constructor. 
    
    
    你唯一可以给this.state分配值的地方是构造函数。 
    
    
    
  
    
   
   
   
   
  
   2.state的更新可能是异步的 
  
 
 
  
   
   react可能在一次更新中批处理多个setState方法。 
   
   
   
  
   
  
 
 
  
   
    
    Because 
    this.props 
    and 
    may be updated asynchronously,you should not rely on their values for calculating the next state. 
    
 
   
 
    
    因为更新可能是异步的，所以不要依赖他们的值来计算下一个state 
    
    
    
  
    
    
     
    // Wrong
this.setState({
  counter: this.state.counter + this.props.increment,}); 
    
 
    To fix it,use a second form of 
    setState() 
    that accepts a function rather than an object. That function will receive the previous state as the first argument,and the props at the time the update is applied as the second argument: 
    
 
    
    
    
  
    
    
     
    // Correct
this.setState((prevState,props) => ({
  counter: prevState.counter + props.increment
})); 
    
 
    
 
    
  
 
  3.state的更新会被合并 
 
 
 
 
  
   
   When you callsetState()react会合并你向state里面提供的对象。 
   
   
   Then you can update them independently with separatecalls:
  
  
 
   
    
     componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  } 
   
 
   The merging is shallow,sothis.setState({comments})leavesthis.state.postsintact,but completely replacesthis.state.comments.
  
   
   
   合并会不管this.state.posts，只会更新this.state.comments 
   
   
   
  
   
   
   
  
   
 
 
 
6.The data flow down 
 
  
   
   Neither parent nor child components can know if a certain component is stateful or stateless,and they shouldn't care whether it is defined as a function or a class. 
   
 
   
   
   parent和child控件都不会知道一个控件是stateful还是stateless。 
   
   
   
  
   
   
   This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
  
   
   
   除了这个控件本身，其他控件是不能access 这个控件的state的。 
   
   
   A component may choose to pass its state down as props to its child components
  
   
   
   一个控件可以选择将它的state作为props传递给它的子控件。 
   
   
    
   <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 
   
 
   
 
   
   
   This also works for user-defined components
  
   
   
   这同样适用于自定义组件。 
   
   
    
   <FormattedDate date={this.state.date} /> 
    
    
  
    
   The 
   FormattedDate 
   component would receive the 
   date 
   in its props and wouldn't know whether it came from the 
   's state,from the 
   's props,or was typed by hand: 
  
 
   
   这个组件会在它的props里面获得date，不会知道这个date来自Clock组件的state，来自Clock组件的props还是手动输入的。 
   
   
    
   function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
} 
   
 
   This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component,and any data or UI derived from that state can only affect components "below" them in the tree. 
   
 
   
   
   任何state都是被具体的state所拥有的。任何来自于那个state的数据或者UI只能影响低于这个state自己控件的控件。 
   
   
   一个完整的例子： 
   
   
    
   function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(<App />,document.getElementById('root'));
   
     
 
 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

前端框架React - State 和生命周期

1.Introduction of state

2.将function转换成Class

3.给Class添加local state

4.添加生命周期方法到Class中

5.正确的使用State

6.The data flow down

相关推荐

前端框架React - State 和 生命周期

1.Introduction of state

2.将function转换成Class

3.给Class添加local state

4.添加生命周期方法到Class中

5.正确的使用State

6.The data flow down

相关推荐

前端框架React - State 和生命周期