React の state と props の違いは何ですか?

違い: props はコンポーネントに渡されますが (関数の仮パラメーターと同様)、状態はコンポーネント自体によってコンポーネント内で管理されます (関数内で宣言された変数と同様)。 State はコンポーネント自身のデータ管理と自身の状態の制御であり、変数であり、props は外部から渡されるデータパラメータであり、不変です。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

関連する推奨事項: 「

React ビデオ チュートリアル 」

小道具

中心となるアイデアReact はコンポーネント化のアイデアにより、ページがいくつかの独立した再利用可能なコンポーネントに分割されます。

コンポーネントは、概念的には 1 つのパラメーターを入力値として受け入れることができる関数です。このパラメーターは

props であるため、props は、コンポーネントの外側、コンポーネント内のデータ。 React は一方向のデータ フローであるため、props は基本的に親コンポーネントから子コンポーネントに渡されるデータです。

使用法

今リストを実装する必要があるとします。React コンポーネント化のアイデアによれば、リスト内の行をコンポーネントとして扱うことができます。コンポーネントには

と の 2 つがあります。

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

リストのデータを見てみましょう。一時的に

data# に配置されていると仮定します。 ## 変数。次に、map 関数を使用して、各項目が <Item item='data'/> である配列を返します。これは、実際には ## が含まれていることを意味します。 #data.length コンポーネントの場合、データはコンポーネントのパラメーターをカスタマイズすることによって渡されます。もちろん、ここでは必要な数のカスタム パラメーターを渡すことができます。

では次のようになります:

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

render

関数でわかるように、コンポーネントは # を使用します。 ##this.props

コンポーネントに渡されたすべてのデータを取得するには、このコンポーネントのすべての設定を含むオブジェクトを使用します。現在、このオブジェクトには item 属性が 1 つだけ含まれているため、 this.props.itemとにかく手に入れましょう。 読み取り専用

props は、コンポーネントと初期化状態のレンダリングによく使用されます。コンポーネントがインスタンス化されると、その

props

は読み取り専用であり、変更できません。レンダリング プロセス中に props が変更される可能性がある場合、このコンポーネントの表示形式は予測不能になります。新しい props は、親コンポーネントの再レンダリングを通じてのみコンポーネントに渡すことができます。 デフォルトパラメータ

コンポーネントでは、props のパラメータに

defaultProps

を設定することをお勧めします。そのタイプを定式化します。たとえば、これ: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Item.defaultProps = { item: &amp;#39;Hello Props&amp;#39;, }; Item.propTypes = { item: PropTypes.string, };</pre><div class="contentsignin">ログイン後にコピー</div></div>About propTypes、次の型として宣言できます:

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

summary

props は、外部からコンポーネントに渡されるパラメータです。その主な機能は、親コンポーネントから子コンポーネントにデータを渡すことです。読み取り可能かつ不変です。新しい

props はアクティブにのみ渡すことができます外部コンポーネントを介して入力します。

を使用してサブコンポーネントを再レンダリングします。それ以外の場合、サブコンポーネントの props とプレゼンテーション フォームは変更されません。 状態

状態とは何ですか?

State is similar to props, but it is private and fully controlled by the component.

コンポーネントの表示形式は、データ状態と外部パラメータによって決まります。外部パラメータは props、データ状態は

state

Usage

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

まず、コンポーネントが初期化されるときに、this.state を通じてコン​​ポーネントに初期

state

を設定します。このデータは、コンポーネントを render で一度レンダリングするために使用されます。 setState

state

props

との違いは、state を変更できることです。ただし、this.state= を通じて直接変更することはできません。state は、this.setState() メソッドを通じて変更する必要があります。 たとえば、非同期操作を通じてデータを取得することがよくあります。didMount ステージで非同期操作を実行する必要があります:

componentDidMount(){
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

データ取得が完了したら、 # を通じて# #this.setStateデータの状態を変更します。

this.setState メソッドを呼び出すと、React はコンポーネントのデータ状態 state

を更新し、

render メソッドを再度呼び出します。コンポーネントは再レンダリングされます。 注: this.state= を使用して

state

を初期化し、this.setState を使用して state## を変更します#、constructor が初期化できる唯一の場所です。 setState最初のパラメータとしてオブジェクトまたは関数を受け入れます。更新する必要がある部分のみを渡す必要があります。オブジェクト全体を渡す必要はありません。 、 のような： ＃＃＃<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default class ItemList extends React.Component{ constructor(){ super(); this.state = { name:&amp;#39;axuebin&amp;#39;, age:25, } } componentDidMount(){ this.setState({age:18}) } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>在执行完<code>setState之后的state应该是{name:'axuebin',age:18}。

setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

总结

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

区别

• props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）
  

• state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；

• 没有state的叫做无状态组件，有state的叫做有状态组件；

• 多用props，少用state。也就是多写无状态组件。

更多编程相关知识，请访问：编程教学！！

以上がReact の state と props の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。