close

React 基本概念- Components、 Props、 State

1. Components

Components は、 React 再利用できる独立した構成要素です。 これらは小さな UI 要素に分割されており、結合してより大きな UI 要素を形成できます components。 たとえば、アプリケーションには 、 など components を含めることができます 。 各コンポーネントには独自の役割があり、対応するデータを受信 して ​​表示できます。 Header Sidebar Content props state

例： 

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

 

2. Props

Props in は 外部から React 渡される値です。 これらは、親から子に components データを渡すのに役立ちます 。 は読み取り専用であり、コンポーネント内で変更することはできません。 を使用するには 、コンポーネントの属性に値を渡し、それを UI 部分で使用します。 components components Props props

例： 

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

 

3. State

State in は React 、コンポーネント内で変更できる可変データです。 各コンポーネントは、動的データを保存および管理するための独自のコンポーネントを持つことができます state。 変更されると state、 React 対応するユーザー インターフェイスが自動的に更新されます。 State クラス内でのみ管理され components 、コンポーネントのコンストラクターで初期化されます。 を更新するには state 、`set State()` メソッドを使用します。

例： 

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}