简述React中无状态组件和有状态组件的区别

React中的组件主要分为无状态组件和有状态组件两类。

1&＃xff0c;无状态组件主要用来定义模板&＃xff0c;接收来自父组件props传递过来的数据&＃xff0c;使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性&＃xff0c;以便于组件复用。创建无状态组件如下&＃xff1a;

var Header &＃61; (props) &＃61; (

2&＃xff0c;有状态组件主要用来定义交互逻辑和业务数据&＃xff08;如果用了Redux&＃xff0c;可以把业务数据抽离出去统一管理&＃xff09;&＃xff0c;使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上&＃xff08;有状态组件也可以叫做容器组件&＃xff0c;无状态组件也可以叫做展示组件&＃xff09;&＃xff0c;然后传递props到展示组件&＃xff0c;展示组件接收到props&＃xff0c;把props塞到模板里面。创建有状态组件如下&＃xff1a;

class Home extends React.Component {constructor(props) {super(props);};render() {return ( //也可以写成)}
}


这个是官方默认的写法&＃xff0c;在构造函数里面默认要传递一个参数进去&＃xff0c;并且要调用super()方法&＃xff0c;来获取子类的实例。但是比较疑惑的地方是为什么要传递这些参数&＃xff0c;传递这些参数有什么用&＃xff1f;

因为从render()里面的组件来看&＃xff0c;构造函数不传递参数也可以获取到组件实例上的props属性。如下&＃xff1a;

class Home extends React.Component {constructor() {super();};render (){return(

这个比较好理解&＃xff0c;因为render()方法是子组件原型上的方法&＃xff0c;获取实例属性的时候要通过this来访问&＃xff0c;如果去掉this就获取不到了。

那问题来了&＃xff0c;如果我们要在构造函数中访问props改怎么办呢&＃xff1f;此时&＃xff0c;我们就要在constructor构造函数中传递一个props参数&＃xff0c;这样就可以访问到子组件实例上的props属性了。如下&＃xff1a;

class Header extends React.Component {constructor(props) {super();this.name &＃61; props.name; //获取到子组件实例上的props.name属性&＃xff0c;赋值给实例属性name};render() {return (

还有一个问题&＃xff0c;super(props)方法中为什么也要传递一个props属性呢&＃xff1f;看下面的例子&＃xff1a;

class Header extends React.Component {constructor(props) {super(props);this.state &＃61; {nameOne: props.name,nameTwo: this.props.name //super()方法中传递了props属性&＃xff0c;this.props才可以获取到name属性}};render() {return (

其实&＃xff0c;props.name和this.props.name的值都是一样的&＃xff0c;但是它俩还是有区别的&＃xff0c;props.name中这个props就是子组件的属性props&＃xff0c;但是this.props.name中的这个props却不是子组件的属性props&＃xff0c;虽然值都是一样的&＃xff0c;这个props其实在调用super方法的时候被传递到了Component这个父类中去了&＃xff0c;所以this.props.name获取到的是Component父类中的props属性。看下React的源码&＃xff1a;

发现没&＃xff0c;子类super方法把props参数传递给了父类Component&＃xff0c;Component把props参数挂载到它的实例属性props上了。所以&＃xff0c;你只有给super方法中传递props参数&＃xff0c;在构造函数里才能用this,props.xxx

如果super方法中不传递props参数&＃xff0c;获取this.props.name的值就会报错。获取this.props显示为undifined&＃xff1a;如下&＃xff1a;

class Header extends React.Component {constructor(props) {super();this.state &＃61; {nameOne: this.props.name, nameTwo: this.props };console.log(this.props.name); //报错console.log(this.props); //undifined};render() {return (

这种写法本质是给子组件Header的实例属性state.nameOne和state.nameTwo赋值了一个子组件Header的实例属性props&＃xff0c;简单来说&＃xff0c;就是Header子组件创建了一个state属性&＃xff0c;然后又把自己的props属性赋值给了自己的state属性。
为什么this.props打印出undefined&＃xff1f;因为props是调用子组件的时候传入的参数&＃xff0c;所以在构造函数内部是访问不到props的&＃xff0c;那么对于this.props.name来说&＃xff0c;毫无疑问肯定报错。

所以&＃xff0c;对与构造函数中的props参数和super中的props参数来说&＃xff0c;如果你不在构造函数中用this.props和props&＃xff0c;完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的&＃xff0c;所以写哪个都可以。但是官方文档上是两个参数都有写。所以为了严谨&＃xff0c;还是都写上吧。

但是&＃xff0c;我个人还是喜欢这样的写法。

constructor(props) {super(props);this.state &＃61; {name: props.name}
};


不加this的是value&＃xff0c;加了this的是key。