React props与state的主要区别是什么?

props和state的主要区别是props是不变的。 这就是为什么容器组件应该定义可以更新和更改的状态,而子组件只应该使用props来传递状态数据。

使用props

当我们在组件中需要不可变的数据时,可以在main.js中添加props到reactDOM.render()函数中,并在组件中使用它。

文件:App.jsx -

import React from 'react';
 
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

文件:main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
 
ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));
 
export default App;

这将产生以下结果 -

1.png

默认props

我们也可以直接在组件构造函数中设置默认属性值,而不是将其添加到reactDom.render()元素。

文件:App.jsx -

import React from 'react';
 
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

文件:main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
 
ReactDOM.render(<App/>, document.getElementById('app'));

输出和以前一样 -

2.png

State 和 Props

以下示例显示如何在应用程序中组合State 和 Props。 在父组件中设置状态并使用Props将其传递给组件树。 在render函数内部,设置了在子组件中使用的headerProp和contentProp。

文件:App.jsx -

import React from 'react';
 
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

文件:main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
 
ReactDOM.render(<App/>, document.getElementById('app'));

结果会和前面两个例子一样,唯一不同的是我们数据的来源,现在来自state。 当想更新它时,只需要更新状态,所有的子组件都会被更新。

3.png

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是React props与state的主要区别是什么?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1