app W3 reactjs 學習

2024-04-27 15:14:38

字體：大中小

來源：轉載

供稿：網友

1 react教程

2 react 安裝

mkdir reactapp 801 cd reactapp/ 802 npm init -y 803 npm install --save react react-dom 804 npm install --save-dev babel-core babel-loader babel-PReset-react babel-preset-es2015 805 npm install --save-dev webpack 806 touch index.html 807 touch App.jsx 808 touch main.js 809 touch webpack.config.js

cat package.json

{ "name": "reactapp", "version": "1.0.0", "descrWords": [], "author": "", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "webpack": "^2.2.1" }}

cat webpack.config.js

var config = { entry: './main.js', output: { path: __dirname, filename: 'index.js', }, devServer: { inline: true, port: 3000, host: '0.0.0.0', }, module: { loaders: [{ test: //.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'], }, }], },};module.exports = config;

cat index.html

<!DOCTYPE html><html> <head> <meta charset ="UTF-8"> </head> <title> react app</title> <body> <div id="app" ></div> <script src ="index.js"> </script></html>

cat App.jsx

import React from "react";export default class App extends React.Component{render(){ return( <div> hello </div> );}}

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';ReactDOM.render(<App />,document.getElementById('app'));

這里寫圖片描述

3JSX

1 獨立文件 cat helloworld_react.js

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

然后在 HTML 文件中引入該 JS 文件

javaScript 表達式我們可以在 JSX 中使用 Javascript 表達式。表達式寫在花括號 {} 中

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));

樣式 React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字后自動添加 px 。以下實例演示了為 h1 元素添加 myStyle 內聯樣式：

var myStyle = { fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById('example'));

4注釋注釋需要寫在花括號中，實例如下：

ReactDOM.render( <div> <h1>菜鳥教程</h1> {/*注釋...*/} </div>, document.getElementById('example'));

5數組 JSX 允許在模板中插入數組，數組會自動展開所有成員：

var arr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

6HTML 標簽 vs. React 組件 React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。

var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。

var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小寫的約定來區分本地組件的類和 HTML 標簽。

4 React 組件

如果我們需要向組件傳遞參數，可以使用 this.props 對象,實例如下： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ render: function() { return <h1>Hello{this.props.name}</h1>; }});ReactDOM.render(<HelloMessage name="denny"/>,document.getElementById('app'));

npm start 以上實例中 name 屬性通過 this.props.name 來獲取。

2復合組件我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。以下實例我們實現了輸出網站名字和網址的組件： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); }});var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); }});var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); }});ReactDOM.render( <WebSite name="菜鳥教程" site=" http://www.runoob.com" />, document.getElementById('app'));

5 React State(狀態)

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。 React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。以下實例中創建了 LikeButton 組件，getInitialState 方法用于定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var LikeButton = React.createClass({ getInitialState: function(){ return {liked: false};//這里為啥不是() }, handleClick:function(event){ this.setState({liked:!this.state.liked}); }, render:function(){ var text = this.state.liked?'喜歡':'不喜歡'; return( <p onClick={this.handleClick}> 你<b>{text}</b>我，點我換狀態 </p> ); }});ReactDOM.render( <LikeButton />, document.getElementById('app'));

6 React Props

state 和 props 主要的區別在于 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據。而子組件只能通過 props 來傳遞數據。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ render:function(){ return<h1> hi,{this.props.name}</h1>; }});ReactDOM.render( <HelloMessage name ="denny" />, document.getElementById('app'));

你可以通過 getDefaultProps() 方法為 props 設置默認值，實例如下： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ getDefaultProps: function(){ return{ name:'denny' }; },render:function(){ return<h1> hello,{this.props.name}</h1>;}});ReactDOM.render( <HelloMessage />, document.getElementById('app'));

State 和 Props 以下實例演示了如何在應用中組合使用 state 和 props 。我們可以在父組件中設置 state，并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var WebSite = React.createClass({ getInitialState: function(){ return { name:"菜", site:"http://www.baidu.com" }; }, render:function(){ return( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> );}});var Name = React.createClass({ render: function(){ return( <h1> {this.props.name}</h1> ); }});var Link = React.createClass({ render: function(){ return( <a href ={this.props.site}> <h1> {this.props.site}</h1> </a> ); }});ReactDOM.render( <WebSite />, document.getElementById('app'));

Props 驗證 Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。以下實例創建一個 Mytitle 組件，屬性 title 是必須的且是字符串，如果是一個數字則會報錯： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var title = "教程";//var title = 123;var MyTitle = React.createClass({ propTypes:{ title:React.PropTypes.string.isRequired, }, render:function(){ return<h1> {this.props.title}</h1>; }});ReactDOM.render( <MyTitle title={title} />, document.getElementById('app'));

7 React 組件 API

7個方法: 設置狀態：setState 替換狀態：replaceState 設置屬性：setProps 替換屬性：replaceProps 強制更新：forceUpdate 獲取DOM節點：findDOMNode 判斷組件掛載狀態：isMounted

關于setState 不能在組件內部通過this.state修改狀態，因為該狀態會在調用setState()后被替換。 setState()并不會立即改變this.state，而是創建一個即將處理的state。setState()并不一定是同步的，為了提升性能React會批量執行state和DOM渲染。 setState()總是會觸發一次組件重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Counter = React.createClass({ getInitialState:function(){ return{clickCount:0}; }, handleClick:function(){ this.setState(function(state){ return{clickCount:state.clickCount +1}; }); }, render:function(){ return(<h2 onClick={this.handleClick}>點我，點擊次數為:{this.state.clickCount}</h2>); }});ReactDOM.render( <Counter />, document.getElementById('app'));

替換狀態：replaceState

replaceState(object nextState[, function callback]) nextState，將要設置的新狀態，該狀態會替換當前的state。 callback，可選參數，回調函數。該函數會在replaceState設置成功，且組件重新渲染后調用。 replaceState()方法與setState()類似，但是方法只會保留nextState中狀態，原state不在nextState中的狀態都會被刪除。

設置屬性：setProps

setProps(object nextProps[, function callback]) nextProps，將要設置的新屬性，該狀態會和當前的props合并 callback，可選參數，回調函數。該函數會在setProps設置成功，且組件重新渲染后調用。設置組件屬性，并重新渲染組件。 props相當于組件的數據流，它總是會從父組件向下傳遞至所有的子組件中。當和一個外部的JavaScript應用集成時，我們可能會需要向組件傳遞數據或通知React.render()組件需要重新渲染，可以使用setProps()。更新組件，我可以在節點上再次調用React.render()，也可以通過setProps()方法改變組件屬性，觸發組件重新渲染。

替換屬性：replaceProps

replaceProps()方法與setProps類似，但它會刪除原有props

強制更新：forceUpdate

forceUpdate()方法會使組件調用自身的render()方法重新渲染組件，組件的子組件也會調用自己的render()。但是，組件重新渲染時，依然會讀取this.props和this.state，如果狀態沒有改變，那么React只會更新DOM。 forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過該方法通知React需要調用render() 一般來說，應該盡量避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態并由React觸發render()調用。

獲取DOM節點：findDOMNode

DOMElement findDOMNode() 返回值：DOM元素DOMElement 如果組件已經掛載到DOM中，該方法返回對應的本地瀏覽器 DOM 元素。當render返回null 或 false時，this.findDOMNode()也會返回null。從DOM 中讀取值的時候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。

判斷組件掛載狀態：isMounted

bool isMounted() 返回值：true或false，表示組件是否已掛載到DOM中 isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場景下的調用不會出錯。

8 React 組件生命周期

組件的生命周期可分成三個狀態： Mounting：已插入真實 DOM Updating：正在被重新渲染 Unmounting：已移出真實 DOM 生命周期的方法有： componentWillMount 在渲染前調用,在客戶端也在服務端。 componentDidMount : 在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者發送Ajax請求等操作(防止異部操作阻塞UI)。 componentWillReceiveProps 在組件接收到一個新的prop時被調用。這個方法在初始化render時不會被調用。 shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。可以在你確認不需要更新組件時使用。 componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。 componentDidUpdate 在組件完成更新后立即調用。在初始化時不會被調用。 componentWillUnmount在組件從 DOM 中移除的時候立刻被調用。這些方法的詳細說明，可以參考官方文檔。以下實例在 Hello 組件加載以后，通過 componentDidMount 方法設置一個定時器，每隔100毫秒重新設置組件的透明度，并重新渲染： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Hello = React.createClass({ getInitialState:function(){ return{ opacity:1.0 }; }, componentDidMount:function(){ this.timer = setInterval(function(){ var opacity = this.state.opacity; opacity -= .05; if(opacity<0.1){ opacity = 1.0 } this.setState({ opacity:opacity }); }.bind(this),100); }, render:function(){ return( <div style={{opacity:this.state.opacity}}> hello {this.props.name} </div> ); }});ReactDOM.render( <Hello name="world" />, document.getElementById('app'));

以下實例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 組件中。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Button = React.createClass({ getInitialState:function(){ return{ data:0 }; }, setNewNumber:function(){ this.setState({data:this.state.data+1}) }, render:function(){ return( <div> <button onClick = {this.setNewNumber}> INCREMENT</button> <Content myNumber = {this.state.data}></Content> </div> ); }});var Content = React.createClass({ componentWillMount:function(){ console.log('Component will mount'); }, componentDidMount:function(){ console.log('component did mount'); }, componentWillReceiveProps:function(newProps){ console.log('component will receive props'); }, shouldComponentUpdate:function(newProps, newState) { return true; }, componentWillUpdate:function(nextProps,nextState){ console.log('component will update'); }, componentDidUpdate:function(prevProps,prevState){ console.log('component did update'); }, componentWillUnmount:function(){ console.log('component will unmount'); }, render:function(){ return( <div> <h3> {this.props.myNumber}</h3> </div> ); }});ReactDOM.render( <div> <Button /> </div>, document.getElementById('app'));

9 React AJAX

React 組件的數據可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫可以將數據存儲在 state 中，再用 this.setState 方法重新渲染 UI。當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。以下實例演示了獲取 Github 用戶最新 gist 共享描述: [執行不了】Uncaught ReferenceError: mountNode is not defined cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.username} 用戶最新的 Gist 共享地址： <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); }});ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode);

10 React 表單與事件

一個簡單是實例

在實例中我們設置了輸入框 input 值value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化，并修改 state。 cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var HelloMessage = React.createClass({ getInitialState: function() { return { value:'hello denny' }; },handleChange:function(event){ this.setState({value:event.target.value});//這個還要好好學學}, render: function() { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div> ); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));

上面的代碼將渲染出一個值為 Hello Runoob! 的 input 元素，并通過 onChange 事件響應更新用戶輸入的值。

實例 2

在以下實例中我么將為大家演示如何在子組件上使用表單。 onChange 方法將觸發 state 的更新并將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面。你需要在父組件通過創建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Content = React.createClass({ render:function(){ return(<div> <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> <h4> {this.props.myDataProp}</h4> </div> ); }});var HelloMessage = React.createClass({ getInitialState: function() { return { value:'hello denny' }; },handleChange:function(event){ this.setState({value:event.target.value});}, render: function() { var value = this.state.value; return ( <div> <Content myDataProp={value} updateStateProp = {this.handleChange}></Content> </div> ); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));

React 事件

以下實例演示通過 onClick 事件來修改數據： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';// var Content = React.createClass({// render:function(){// return(<div>// <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}// />// <h4> {this.props.myDataProp}</h4>// </div>// );// }// });var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello Runoob!'}; }, handleChange: function(event) { this.setState({value: '菜鳥教程'}) }, render: function() { var value = this.state.value; return (<div> <button onClick={this.handleChange}>點我</button> <h4>{value}</h4> </div>); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));

當你需要從子組件中更新父組件的 state 時，你需要在父組件通過創建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。實例如下： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var Content = React.createClass({ render:function(){ return( <div> <button onClick = {this.props.updateStateProp}>點我</button> <h4>{this.props.myDataProp} </h4> </div> ); }});var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello Runoob!'}; }, handleChange: function(event) { this.setState({value: '菜鳥教程'}) }, render: function() { var value = this.state.value; return (<div> <Content myDataProp ={value} updateStateProp ={this.handleChange}></Content> </div>); }});ReactDOM.render( <div> <HelloMessage /> </div>, document.getElementById('app'));

11 React Refs

React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。這個特殊的屬性允許你引用 render() 返回的相應的支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。

完整實例

你可以通過使用 this 來獲取當前 React 組件，或使用 ref 來獲取組件的引用，實例如下： cat main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './app.jsx';var MyComponent = React.createClass({ handleClick:function(){ //使用原生的DOM API得到焦點 this.refs.myInput.focus(); }, render:function(){ //當組件插入到DOM后，ref屬性添加一個組件的引用到this.refs return( <div> <input type="text" ref="myInput" /> <input type="button" value="點我輸入框獲取焦點" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <div> <MyComponent /> </div>, document.getElementById('app'));

實例中，我們獲取了輸入框的支撐實例的引用，子點擊按鈕后輸入框獲取焦點。我們也可以使用 getDOMNode()方法獲取DOM元素

上一篇：JavaScript學習

下一篇：AngularJS的四大核心特性（二）