jsx语法二 - 从零开始学React
React中：第二种创建组件的方式
了解ES6中class关键字的使用
基于class关键字创建组件
使用 class 关键字来创建组件
//使用class创建的类，通过extents关键字，继承了React.Component之后，就是一个组件的模板了。
//如果想要引用这个组件，可以把类的名称，以标签的形式导入到jsx中使用。
class Person extends React.Component{
// 通过报错提示得知：在class创建的组件中，必须定义一个render函数
render(){
// 在render函数中，必须返回一个null或者符合规范的虚拟DOM元素
return <div>
<h1>这是用 class 关键字创建的组件！</h1>
</div>;
}
}
//在function创建的组件中，如果想使用props,就必须先定义，否则无法使用，
//但是，下class中定义的组件中，可以直接用this.props来直接访问。不需要预先接收props
//注意：无论在function中还是在class中，props都是只读的
class Hello extends React.Component {
constructor(props){
// 在使用extends实现的继承，要在constructor第一行，一定要显示的调用super()
// spuer表示父类的构造函数
super(props);
// 在super()中添加props后，可以直接使用this.props
// 在constructor中，如果想要访问props属性，不能直接使用this.props
// 而是要在constructor的构造函数参数列表中，显示的定义props参数来接收，才能正常使用
console.log(this.props.name);
}
render() {
console.log(this);
// this.props.name = 'ergou';
return <div>
sdfsdf{this.props.name}
</div>
}
}复制代码组件中的私有属性state
在组件中，我们可以定义state来实现私有属性，除了拥有并设置了它的组件，其他组件都无法访问。 State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
constructor(){
this.state = {
comment:'这是个私有属性'
}
}复制代码注意： 1.不要直接修改 State
// Wrong
this.state.comment = 'Hello';
而是应该使用 setState():
// Correct
this.setState({comment: 'Hello'});
1.
<button onClick={this.changestate}>修改数据</button>
changestate=()=>{
this.setState({
msg: 'msg'
});
}
2.
<input type="text" value={this.state.msg} onChange={this.iptchange}/>
iptchange=(event)=>{
event.persist();
console.log(event.target.value);
this.setState({
msg: event.target.value
});
}复制代码2.State 的更新可能是异步的 因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。 所以 setState方法，也支持传递一个function 作为参数，并且要在function内部，必须return一个对象。 在function的参数中，支持传递两个参数，其中，第一个是state(数据修改之前的老的state数据) 第二个参数，是外界传入组件的数据props
iptchange=()=>{
this.setState(function(ostate,props){
console.log(ostate);
return {
info:'is changed'
}
});
}
或者以下方式：
this.setState(function(ostate,props){
// console.log(ostate);
return {
msg: '我是修改过后的msg'
}
},function(){
// 在第二个回调函数中来，获取你修改过之后的数据
console.log(this.state);
// 利用这个修改后的数据。做后序的功能
});复制代码3.单向数据流，组件可以选择把它的 state 作为 props 向下传递到它的子组件中 这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。 如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
两种创建组件方式的对比
注意:以上两种创建组件的方式，有着本质上的区别，其中， /使用function构造函数创建的组件，内部没有state私有数据，只有一个props来接收外界传递过来的数据; //使用class关键字创建的组件，内部，除了有this.props这个只读属性之外，还有一个专门用于存放自己私有 数据的this.state属性，这个state是可读可写的! /基于上面的区别:我们可以为这两种创建组件的方式下定义了:
使用function创建的组件，叫做【无状态组件】﹔
使用class创建的组件，叫做【有状态组件】 //有状态组件和无状态组件，最本质的区别，就是有无state属性;
同时，class创建的组件，有自己的生命周期函数， 但是，function创建的组件，没有自己的生命周期函数;
问题来了:什么时候使用有状态组件，什么时候使用无状态组件呢??? //1.如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用class 创建出来的有状态组件; 1/2.如果一个组件，只需要根据外界传递过来的props，渲染固定的页面结构就完事儿了，此时，非常适合使用 function创建出来的无状态组件;(使用无状态组件的小小好处:由于剔除了组件的生命周期，所以，运行速度会相对快一些
作者：leeming
链接：https://juejin.cn/post/7023369241613041694