React学习笔记之（有状态组件和无状态组件）3

1，函数组件又叫做无状态组件，类组件又叫做有状态组件

2，状态（state）即数据`

// 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
// state 的值时对象，表示一个组件可以有多个数据
class Hello Extends React.Component{
        constructor(){
             super();
             this.state = {  // 使用的时候可以省略构造器，直接使用state = {}
             count:  0
             }
        }
        render(){
        return {
         <div>有状态组件</div>
        }
        }
}
//  状态的修改 setState()修改状态
//  状态是可变的
//  注意：不可以直接修改state中的数据
//  利用箭头函数自身不绑定this的特点
//  render()方法为组件实例，可以获取setState()
// 事件绑定this指向 Function.prototype.bind(),利用ES6中的bind方法，将事件程序中的this与组件实例绑定到一起
           

3，函数组件没有自己的状态，只负责数据展示（静）

4，类组件有自己的状态，负责更新UI，让页面’‘动’‘起来

5，表单处理，受控组件

A：在state中添加一个状态，作为表单元的value值（控制表单元素值的来源）

B：给表单元素绑定change事件，将表单元素的值 设置为state的值（控制表单元素的变化）

class App extends React.Component {
state = {
 text : '  '
}
    handleChange = e => {
         this.setState({
         text: e.target.value
         })
    }
    render(){
        return (
        <div>
        <input  type = 'text'  value = { this.state.text} onchange = { this.handleChange} />
        </div>
        )
    }
}