Foreword

Ready to learn the front.
[Jun] reactionary from the article, I knew 系统性学习the word.
He said is quite right. Systematic learning, is very difficult.
As a person doing work in integrated technology company, I became interested in systematic learning techniques.
He started from the front.
First established methodology of learning.
My approach is: a systematic study is divided into a finite number of points, each point will understand, label, prioritize, arrange distribution. Finally produce value applications.

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,world!</h1>
        <h2>现在是{this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

  ReactDOM.render(
    <Clock />,
    document.getElementById('example')
  );
}

This is the rookie tutorial article code.

The first question: React.Component What does it mean?

React among the front-end frame, there is a 组件concept.
This 组件can be defined in two forms: 类(class)and 函数.

Since there are two forms, then decide how, when to use which is it?
This can be confirmed as a [problem].
First, it is certain that, class components currently offers more features.

If the component class is defined, the above code is the following parts:

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

Here extendsis the English translation 延伸of the meaning can be extended to 继承mean.
First sentence, is said to have a class Clock, it is inherited from React.Componentthe.
In other words, Clock is React.Componenta subclass.

Here is the meaning of Component assembly.
React.Component seems to be the father of all the component class look.
It is the father of all the component class, it newbest.
Component ReactBaseClasses.js the source code.

The above code is to create a Clock组件a.

The second question: What is the DOM?

DOM, is document object modelan abbreviation.
Means that the document object model.
The intention, which is an interface (the API), a method of operating a similar method.
For example, HTML DOMit is the standard method for accessing and manipulating HTML documents.
However, in the general expression, DOM also having one frequently used to refer to the meaning.
It is DOM就是文档.

[In] the first question, we have created is a component of React.
Component is a class is an object, therefore, it is an example of assembly.

When the component instance is created and which when inserted into the DOM.
This sentence, I can understand DOM, refer to the documentation is.

The third question: What is the life cycle of components?

The life cycle of components, there are several 挂载stages: 更新, 卸载, 错误处理, .
Each time components are included 生命周期方法.

Note: bold, are common components of the life cycle approach. Not bold, not commonly used.

1. Mount

When the component instance is created, and which when inserted into the DOM, this process is called the mount.
Call to order life-cycle approach to mount components are as follows:

constructor () // constructor is the constructor of the English meaning.
static getDerivedStateFromProps () // Derive in English is available from .... Obtain derivative status (State) from the Props.
the render () // the render in English meaning is to provide it proposes to make to be mean.
compenentDidMount () // Mount English meaning, the meaning is installed ... in height. Translated into mount.

I think the order is mounted 构造 - 获取派生状态 - 提供 - 安装.

2. Update

When the props or state assemblies is changed, it will trigger the update.

props are attributes? state is the state?

Updated components lifecycle method calls in the following order:

static getDerivedStateFromProps () // get props which derive from state
Whether shouldComponentUpdate () // determine the components should be updated
the render () // provided
getSnapshotBeforeUpdate the snapshot (Snapshot) () // ago component updates
componentDidUpdate () // update assembly embodiment

3. Uninstall

When the assembly is removed from the DOM which will call the following method:

componentWillUnmount () // components will uninstall

4. Error Handling

When the constructor rendering process, life cycle, or subassembly throw an error, it calls the following method:

static getDerivedStateFromError () // get derived from Error in the state.
componentDidCatch () // component execution catch exceptions

Here, and I basically read: [Introduction] code componentDidMount () and componentWillUnmount ()
These two functions are the life-cycle approach, one is mounted, one is unloaded.
These two methods are called life-cycle [hook].
constructor () and render () is also a life-cycle approach.
But the code inside the content, I do not quite understand.

summary

To make my problems, to have clear boundaries. I first decided to an article on the record three questions.
The main is to understand the role [Introduction] code several functions.
This piece of code is fully understood, it has not yet reached.

React learning record -1- component lifecycle