類似vue的data(){return {}}，用于初始化變量。 getInitialState: function() {return {color: false,msg: 'SharkChilli',} },

類似vue的props，用于從外部向內部（父 -> 子）傳值

propTypes: {name: React.PropTypes.string.isRequired,age: React.PropTypes.number.isRequired, }

生命周期鉤子，類似vue的mounted

componentDidMount: function() {
$.get(this.props.source, function(result) {
var data = result.data;
if (this.isMounted()) { // 判斷是否執行過componentDidMount函數
this.setState({
color: data.color,
msg: data.msg
});
}
}.bind(this)); // 綁定到react實例,貌似不bind的話 this.xx是undefind
}, <UserGist source="https://api.github.com/users/octocat/gists" />, // 組件 ?

?類似vue的slot，操作組件不在render內的html元素

render: function() {return (<ol>{React.Children.map(this.props.children, function (child) {return <li>{child}</li>;})}</ol>);}ReactDOM.render(<NotesList><span>hello</span> //外部傳入的html元素<span>world</span></NotesList>,document.getElementById('example'));

?

用于改變初始化的變量

setColor(event){this.setState({
　　　　　　color: event.target.class 　　　　}) }

jsx模板（在這里操作初始化后的變量）

render() {var ctr = this.state.ctr ? '[]~(￣▽￣)~*' : ~~(>_<)~~;return <h1 ref="myH1" onClick={this.setColor}>{color}</h1>; }

?掛載到頁面

ReactDOM.render(<LikeButton title={tog} />,document.getElementById('div') )

?react可以自動展開數組，不過要循環渲染出來操作數據之后的 數組，貌似只能用arr.map()

var repoList = repos.map(function (repo, index) {return (<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>); }); return (<main><h1>array</h1><ol>{repoList}</ol></main> ); var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function (name, index) {return <div key={index}>Hello, {name}!</div>})}</div>,document.getElementById('example')); var arr = [<h1 key="1">Hello world!</h1>,<h2 key="2">React is awesome</h2>,];ReactDOM.render(<div>{arr}</div>,document.getElementById('example'));

?

轉載于:https://www.cnblogs.com/SharkChilli/p/8384930.html

總結

以上是生活随笔為你收集整理的初入react -01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。