2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

之前一直是寫的jsp頁面，應(yīng)為項目需要，最近開始學(xué)習(xí)react，有問題請多指教

聲明式

React 可以非常輕松地創(chuàng)建用戶交互界面。為你應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，在數(shù)據(jù)改變時 React 也可以高效地更新渲染界面。

以聲明式編寫UI，可以讓你的代碼更加可靠，且方便調(diào)試。

組件化

創(chuàng)建好擁有各自狀態(tài)的組件，再由組件構(gòu)成更加復(fù)雜的界面。

無需再用模版代碼，通過使用JavaScript編寫的組件你可以更好地傳遞數(shù)據(jù)，將應(yīng)用狀態(tài)和DOM拆分開來。

一次學(xué)習(xí)，隨處編寫

無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時引入 React 開發(fā)新特性。

React 也可以用作開發(fā)原生應(yīng)用的框架?React Native.

?

組件

react組件使用一個名為render()的方法，接收數(shù)據(jù)作為輸入，輸出頁面中對應(yīng)展示的內(nèi)容。

class HelloMessage extends React.Component {render() {return (<div>Hello {this.props.name}</div>);} }ReactDOM.render(<HelloMessage name="Taylor" />,mountNode );

?

上面這個示例中類似XML的寫法被稱為JSX. 輸入的數(shù)據(jù)通過?this.props?傳入?render()?方法。

react-dom react是虛擬dom（文檔對象模型），reactDOM的作用就是將虛擬dom渲染成實際DOM，reactDOM其它作用后面在看，自己暫時沒看。

?this.props?訪問傳入數(shù)據(jù)

this.state 訪問內(nèi)部狀態(tài)，通過this.state獲取的數(shù)據(jù)改變后，組件會調(diào)用render()方法重新渲染頁面

?

下面這個官方demo中的應(yīng)用

使用props和state 創(chuàng)建一個ToDo應(yīng)用

?

class TodoApp extends React.Component {constructor(props) {super(props);this.state = { items: [], text: '' };this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}render() {return (<div><h3>TODO</h3><TodoList items={this.state.items} /><form onSubmit={this.handleSubmit}><inputonChange={this.handleChange}value={this.state.text}/><button>Add #{this.state.items.length + 1}</button></form></div>);}handleChange(e) {this.setState({ text: e.target.value });}handleSubmit(e) {e.preventDefault();if (!this.state.text.length) {return;}const newItem = {text: this.state.text,id: Date.now()};this.setState(prevState => ({items: prevState.items.concat(newItem),text: ''}));} }class TodoList extends React.Component {render() {return (<ul>{this.props.items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);} }ReactDOM.render(<TodoApp />, mountNode);

在組件中使用第三方庫

直接引入 import XXX from xxxx

根據(jù)官方文檔中的入門教程開發(fā)一個井字游戲

?

轉(zhuǎn)載于:https://my.oschina.net/u/3643058/blog/3038988

總結(jié)

以上是生活随笔為你收集整理的一起学react day1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。