react无状态写法是“{props.xxx}”，其无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，并使用“{props.xxx}”的表达式把props塞到模板里面。
本文操作环境：Windows7系统、react17.0.1、Dell G3。
react无状态写法是什么？
React中无状态组件和有状态组件的写法以及区别
React中的组件主要分为无状态组件和有状态组件两类。
1，无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2，有状态组件主要用来定义交互逻辑和业务数据（如果用了Redux，可以把业务数据抽离出去统一管理），使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上（有状态组件也可以叫做容器组件，无状态组件也可以叫做展示组件），然后传递props到展示组件，展示组件接收到props，把props塞到模板里面。创建有状态组件如下：
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<Header/> //也可以写成<Header></Header>
)
}
}
export default Home
这个是官方默认的写法，在构造函数里面默认要传递一个参数进去，并且要调用super()方法，来获取子类的实例。但是比较疑惑的地方是为什么要传递这些参数，传递这些参数有什么用？
因为从render()里面的组件来看，构造函数不传递参数也可以获取到组件实例上的props属性。如下：
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<Header name="俺是子组件实例上props属性"/>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
这个比较好理解，因为render()方法是子组件原型上的方法，获取实例属性的时候要通过this来访问，如果去掉this就获取不到了。
那问题来了，如果我们要在构造函数中访问props改怎么办呢？此时，我们就要在constructor构造函数中传递一个props参数，这样就可以访问到子组件实例上的props属性了。如下：
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
还有一个问题，super(props)方法中为什么也要传递一个props属性呢？看下面的例子：
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
其实，props.name和this.props.name的值都是一样的，但是它俩还是有区别的，props.name中这个props就是子组件的属性props，但是this.props.name中的这个props却不是子组件的属性props，虽然值都是一样的，这个props其实在调用super方法的时候被传递到了Component这个父类中去了，所以this.props.name获取到的是Component父类中的props属性。看下React的源码：
发现没，子类super方法把props参数传递给了父类Component，Component把props参数挂载到它的实例属性props上了。所以，你只有给super方法中传递props参数，在构造函数里才能用this,props.xxx
如果super方法中不传递props参数，获取this.props.name的值就会报错。获取this.props显示为undifined：如下：
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
这种写法本质是给子组件Header的实例属性state.nameOne和state.nameTwo赋值了一个子组件Header的实例属性props，简单来说，就是Header子组件创建了一个state属性，然后又把自己的props属性赋值给了自己的state属性。
为什么this.props打印出undefined？因为props是调用子组件的时候传入的参数，所以在构造函数内部是访问不到props的，那么对于this.props.name来说，毫无疑问肯定报错。
所以，对与构造函数中的props参数和super中的props参数来说，如果你不在构造函数中用this.props和props，完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的，所以写哪个都可以。但是官方文档上是两个参数都有写。所以为了严谨，还是都写上吧。
但是，我个人还是喜欢这样的写法。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
不加this的是value，加了this的是key。
React中的组件主要分为无状态组件和有状态组件两类。
1，无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2，有状态组件主要用来定义交互逻辑和业务数据（如果用了Redux，可以把业务数据抽离出去统一管理），使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上（有状态组件也可以叫做容器组件，无状态组件也可以叫做展示组件），然后传递props到展示组件，展示组件接收到props，把props塞到模板里面。创建有状态组件如下：
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<Header/> //也可以写成<Header></Header>
)
}
}
export default Home
这个是官方默认的写法，在构造函数里面默认要传递一个参数进去，并且要调用super()方法，来获取子类的实例。但是比较疑惑的地方是为什么要传递这些参数，传递这些参数有什么用？
因为从render()里面的组件来看，构造函数不传递参数也可以获取到组件实例上的props属性。如下：
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<Header name="俺是子组件实例上props属性"/>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
这个比较好理解，因为render()方法是子组件原型上的方法，获取实例属性的时候要通过this来访问，如果去掉this就获取不到了。
那问题来了，如果我们要在构造函数中访问props改怎么办呢？此时，我们就要在constructor构造函数中传递一个props参数，这样就可以访问到子组件实例上的props属性了。如下：
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
还有一个问题，super(props)方法中为什么也要传递一个props属性呢？看下面的例子：
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
其实，props.name和this.props.name的值都是一样的，但是它俩还是有区别的，props.name中这个props就是子组件的属性props，但是this.props.name中的这个props却不是子组件的属性props，虽然值都是一样的，这个props其实在调用super方法的时候被传递到了Component这个父类中去了，所以this.props.name获取到的是Component父类中的props属性。看下React的源码：
发现没，子类super方法把props参数传递给了父类Component，Component把props参数挂载到它的实例属性props上了。所以，你只有给super方法中传递props参数，在构造函数里才能用this,props.xxx
如果super方法中不传递props参数，获取this.props.name的值就会报错。获取this.props显示为undifined：如下：
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
这种写法本质是给子组件Header的实例属性state.nameOne和state.nameTwo赋值了一个子组件Header的实例属性props，简单来说，就是Header子组件创建了一个state属性，然后又把自己的props属性赋值给了自己的state属性。
为什么this.props打印出undefined？因为props是调用子组件的时候传入的参数，所以在构造函数内部是访问不到props的，那么对于this.props.name来说，毫无疑问肯定报错。
所以，对与构造函数中的props参数和super中的props参数来说，如果你不在构造函数中用this.props和props，完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的，所以写哪个都可以。但是官方文档上是两个参数都有写。所以为了严谨，还是都写上吧。
但是，我个人还是喜欢这样的写法。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
不加this的是value，加了this的是key。
推荐学习：《react视频教程》
以上是react无状态写法是什么的详细内容。更多信息请关注PHP中文网其他相关文章！
react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。
react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。
React是双向数据流吗Apr 21, 2022 am 11:18 AMReact不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。
react中为什么使用nodeApr 21, 2022 am 10:34 AM因为在react中需要利用到webpack，而webpack依赖nodejs；webpack是一个模块打包机，在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack，所以react需要使用nodejs。
react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。
react是组件化开发吗Apr 22, 2022 am 10:44 AMreact是组件化开发；组件化是React的核心思想，可以开发出一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树，组件化开发也就是将一个页面拆分成一个个小的功能模块，每个功能完成自己这部分独立功能。
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
react和reactdom有什么区别Apr 27, 2022 am 10:26 AMreact和reactdom的区别是：ReactDom只做和浏览器或DOM相关的操作，例如“ReactDOM.findDOMNode()”操作；而react负责除浏览器和DOM以外的相关操作，ReactDom是React的一部分。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
SublimeText3 Linux新版
SublimeText3 Linux最新版
SublimeText3汉化版
中文版，非常好用
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
