React - Component: Component Class

1. class components have their own state 
2. React.Component- will inherit the life cycle and the this 
3. internal needs a render function (class components by default render method calls, but will not add the default, you need to manually fill in the render function, and can render a return value.) 
basic structure assembly 4. class 
5. the constructor added inside own properties and state methods 
  a. constructor should write write Super 
  B. If the content is not only inside c super, name can not write 
6. Add state this.state = {}; es7 written state = {}. Non-way binding 
7. setState reception object, batch update 
situation 8. setState receiver function, state and penddingState 
9. The method of class written in 
  a. Method directed inside this case undefined 
  class the Person { 
    Fn () { 
      Console .log (this); 
    } 
  } 
  var = new new the Person Person (); 
  var = Fn1 person.fn; 
  Fn1 (); // undefined 
  . the bind change this to point B 
  c arrow pointing this inheritance function. 
  D anonymous function parameter passing.
10. TodoList combat 
11 class components Note: 
Note binding event, the first letter "on" behind the event name capitalization, such as "change" to write "Change" pay attention to this point inside the callback function defaults to undefined, to change? this point 
can not directly change the value of the state, state the need to change the value of a function setState

Class components:

Do complex data processing, need to have their own state, the need for a class components.

He has his own life cycle, there are some built-in functions method react to his offer. And this has its own state.

Highlights:

• The class name is the name of the component
at the beginning of the class must be capitalized •
• class to inherit from React.Component
internal components must be • render function, otherwise an error

The definition of a component:

. 1 Import from React 'REACT'
 2  
. 3  class ToDoList {React.Component the extends
 . 4      the render () {
 . 5          the let ToDoList = <div>
 . 6                  <H3> class I assembly </ H3>
 . 7              </ div>
 . 8          return ToDoList; 
 . 9          // we must render the internal components of the function class, and returns a return value can be rendered. 
10      };
 . 11  }
 12 is  
13 is Export default ToDoList

The introduction of components:

import TodoList from '../components/TodoList'

Calling component:

<TodoList></TodoList>

Internal component class does not render function given:

Seeing class component will be called by default render method
If you see a function component automatically adds a render method inside a function, the function's return value return to run into the render.
Therefore, the internal components must render function class, and returns a return value can be rendered. It will not be automatically added.

Develop a class components - TodoList:

To use the internal components of the data state is called state.
The value of the state must be the object, and spelling is also fixed in this state:

1, to prepare a module, and a preliminary attempt to render the data:

2. Fill in the data and perform the add function to add content to the input List
(no vue two-way data binding function, only one-way. Should know the contents of the input, then set the value to the state data, then state data into render list list.)

2-1, need onChange event listener input input. = Callback function inside the class definition.
Note "on" event behind the name of the first letter capitalized, such as "change" to write "Change"

===

2-2, after onChange assigned to the state in the inputVal
attention to the callback function inside this point: by default, this point undefined

Because when just listening change events, call handleChange function that no one called, pointing undefined.
Like with the following code:

Change this point: by binding

onChange= { this.handleChange.bind(this) }

不能直接改变state的值，会有警告：

// this.state.inputVal = e.target.value;

需要用函数setState来修改state的值

this.setState({
    inputVal: e.target.value
})

最终代码：

2-3、添加功能
注意this绑定、空值的防抖判断等。

3、删除功能

改变this指向的其他方法：

1、bind绑定

this.handleDelete.bind(this,i)

没点击一次就执行了多少次的函数。

2、顶部绑定

onChange= { this.handleChange }

3、箭头函数改变this指向【重点、核心方案】

onChange= { this.handleChange }

4、匿名函数【要传参的情况】
在匿名函数内部让函数去执行

一个函数里有多个setState：

setState里边传入对象，会有参数覆盖的情况。上图示例中只执行最后一个。

批量更新：

在一个函数里有多个setState的情况下，react就会把多个setState放到一起，进行合并。合并完了以后再去执行。那么就只剩下最后一个会起作用了。

目的/好处：

减少虚拟dom的比对，提高渲染的性能。

setState接收函数的情况：setState纯函数

就想设置多个setState还想绕过批量更新，就可以在setState函数里传参函数：

return的对象里边是你要更改的状态。

流程是先进行更改，更改的内容放在pendingState中进行等待。函数完毕后再把pendingState的内容一次性再设置给state里。

2019-12-09 00:24:02