こちら6年前の記事です(現在2020/4/30)。今ならもうちょっと説明できるので興味ある方はこちらをご覧ください。
【Reactのstateとpropsの違いが知りたい！(変更・更新の仕方等DEMOあり)】過去のReact初心者の自分にpropsとstateの違いを説明する
以降は当時の記事
GWにReactを完全に理解して、目標を掲げ２日目ですが、
React。
まだ仲良くなれない。。
どうも参考文献が難しい。。簡単に教えて欲しいなあという思いがありました。
とくに肝のpropsとstate
どの文献も同じ事言っているからもうちょっと違う角度で教えて欲しいなあと
一応おライリーのReactの本とか、
ここに書いてあるReact入門だったり、本家英語のチュートリアルだったり調べて、写経してのですが、
どうも難しいなあと、
役割はわかったし、理屈は分かるんだけど、やっぱちょっと難しいことやってない？？って思っちゃって、
一番わかりやすい動きする部品はないものかとおもっていました。
で、
これが一番わかりやすかったので共有です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react0502</title>
<!-- // <script src="build/react.js"></script>
// <script src="build/JSXTransformer.js"></script>
-->
</head>
<body>
<div id="content"></div>
<script src="src/js/react.js"></script>
<script src="src/js/app.js"></script>
</body>
</html>
htmlは共通です。
props
var Hello = React.createClass({
render(){
return (
<div>Hello!{this.props.name}</div>
);
}
});
React.render(
<Hello name="moritakenji" />,document.getElementById('content')
)
propsを渡す
var Hello = React.createClass({
render(){
return (
<div>myMovieTime!{this.props.fafa}</div>
);
}
});
var sub = [{title:'reon',time:'120'}];
React.render(
<Hello fafa={sub[0].time} />,document.getElementById('content')
)
stateとsetState
ルール
- render()内では値を直接代入してはいけない。
- 変える際はsetState()内で変える
var Hello = React.createClass({
getInitialState(){
return{
name:'morita'
};
},
onClick(){
this.setState({
name:this.state.name + '!'
});
},
render(){
return (
<div>
<h1>Hello!{this.state.name}</h1>
<button onClick={this.onClick}>click</button>
</div>
);
}
});
React.render(
<Hello name="moritakenji" />,document.getElementById('content')
)
setPropsでコンポーネントのオブジェクトとして
var Hello = React.createClass({
render(){
return (
<div>myMovieTime!{this.props.title}</div>
);
}
});
var re = React.render(
<Hello />,document.getElementById('content')
)
re.setProps({title:'reon',time:'120'});