概念のリアクションの証明

Question

私は現在自分自身を教えようとしていますReact、私は現時点でcodepenで働いていますが、私がやっていることは静的なJSONから簡単なユーザープロファイルを作成することです。

私が誰かから欲しいのは、進歩する前に私の理解が正しいことを確認することです。

Reactアプリは状態オブジェクトによって駆動されると私は理解していますか？この状態オブジェクトの要素はコンポーネントに渡すことができ、それらは小道具（読み込み専用ですか？）になります。私が状態にあることができれば、コンポーネント内で使用されているどの小道具にも反映されますか？

基本的に状態からアバターURLを取得し、非常に単純なアバターコンポーネントを作成することは、これまでのところ私の立証したことです。

/* 
* A simple React component 
*/ 

const user = { 
    "id": 1, 
    "first_name": "Anjela", 
    "last_name": "Frow", 
    "email": "afrow0@yelp.com", 
    "dob": "1987-07-09", 
    "gender": "Female", 
    "avatar": "https://robohash.org/quaslaboriosamvoluptas.jpg?size=50x50&set=set1" 
} 

class Application extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     user:user 
    } 
    } 

    render() { 
    return (<Profile user={this.state.user} />); 
    } 
} 

class Profile extends React.Component { 
    render() { 
    return (
     <Avatar image={this.props.user.avatar} /> 
    ) 
    } 
} 

class Avatar extends React.Component { 
    render() { 
    return (
     <div class="avatar"> 
     <img src={this.props.image} /> 
     </div> 
    ) 
    } 
} 

/* 
* Render the above component into the div#app 
*/ 
React.render(<Application />, document.getElementById('app')); 

https://codepen.io/87Development/pen/XabxGX?editors=1010

Answer 1

私はいくつかのものを試してみると、物事は「反応する」方法を確認することをお勧め。 たとえば、user.avatarを更新するボタンを追加します。

onClick() { 
    this.setState({user: Object.assign({}, this.state.user, {avatar: 'new'})}); 
} 

state.userは、本明細書再レンダリングを引き起こすであろう完全に異なるオブジェクト参照に設定されています。

新しい小道具を受け取ると、更新された<Avatar />が表示されます。

既に言及したようにpropsは読み取り専用です。 stateも読み取り専用で、決して直接更新する必要はありませんが、必ずsetState()

Answer 2

はいそうです。

あなたのコードで、それがこれを行うことは非常に実用的で「純粋」ではないですが：それはあなたのProfileが実際にだけでもそれかかわらず、使用する完全なユーザーオブジェクトを必要とする意味からである

return (<Profile user={this.state.user} />); 

イメージが必要です。これだけのアバターのリンクを持っている場合でも、あなたはProfileコンポーネントを使用することができますして

return (<Profile avatar={this.state.user.avatar} />); 

：だから再利用の目的および明確にするため、あなたはむしろアバター小道具を宣言することができます。

これは、渡す必要のあるすべてのユーザープロパティに対して小道具を追加する必要があることを意味します。