React 簡介
React 基本使用
<div id="test"></div>
<script type="text/JAVAscript" src="../js/react.development.js"></script>
<script type="text/JavaScript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> //必須聲明babel
// 創(chuàng)建虛擬DOM元素
const vDom = <h1>Hello React</h1> // 千萬不要加引號
// 渲染虛擬DOM到頁面真實DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
JSX 的基本使用
React 使用 JSX 來替代常規(guī)的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優(yōu)點：
JSX 執(zhí)行更快，因為它在編譯為 JavaScript 代碼后進行了優(yōu)化。它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。使用 JSX 編寫模板更加簡單快速。例如:
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
<div id="test"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript">
// 1. 創(chuàng)建虛擬DOM
/*方式一: 純JS(一般不用)創(chuàng)建虛擬DOM元素對象*/
const msg = 'I Like You!'
const myId = 'Atguigu'
//第一個標簽 第二個id標簽屬性 第三個標簽體內(nèi)容
//React.createElement('h2', {id: myId}, hello)
const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())
// 2. 渲染到真實頁面
const domContainer = document.getElementById('test')
// debugger
ReactDOM.render(vDOM1, domContainer)
</script>
<script type="text/babel"> //必須聲明babel
const msg='I LIKE YOU'
const myId='vue'
// 1. 創(chuàng)建虛擬DOM
/*方式二: JSX創(chuàng)建虛擬DOM元素對象*/
const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
// debugger
// 2. 渲染到真實頁面
ReactDOM.render(vDOM2, document.getElementById('test2'))
ReactDOM.render(vDom, domContainer)
</script>
React 三大組件(state,props,refs)
State 組件
React 把組件看成是一個狀態(tài)機（State machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。
以下實例創(chuàng)建一個名稱擴展為 React.Component 的 ES6 類，在 render() 方法中使用 this.state 來修改當前的時間。
添加一個類構(gòu)造函數(shù)來初始化狀態(tài) this.state，類組件應始終使用 props 調(diào)用基礎構(gòu)造函數(shù)。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>現(xiàn)在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
將生命周期方法添加到類中
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>現(xiàn)在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
props 組件
React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
事件的處理
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 這邊綁定是必要的，這樣 `this` 才能在回調(diào)函數(shù)中使用
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('example')
);
條件的修改
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// 嘗試修改 isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);
聲明周期
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {opacity: 1.0};
}
componentDidMount() {
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 () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<Hello name="world"/>,
document.body
);
React AJAX
React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數(shù)據(jù)時可以將數(shù)據(jù)存儲在 state 中，再用 this.setState 方法重新渲染 UI。
class UserGist extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', lastGistUrl: ''};
}
componentDidMount() {
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() {
this.serverRequest.abort();
}
render() {
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" />,
document.getElementById('example')
);
React Refs
React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 實例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 獲取焦點
this.refs.myInput.focus();
}
render() {
// 當組件插入到 DOM 后，ref 屬性添加一個組件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="點我輸入框獲取焦點"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>
原創(chuàng)作者：Y狼人
