2020-3-18 seo達(dá)人
環(huán)境準(zhǔn)備
創(chuàng)建項(xiàng)目
npx create-react-app my-react
進(jìn)入項(xiàng)目并啟動(dòng)
cd my-react && npm start
1
src/index.js
先把src里面的東西全部刪掉,重寫了index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return (
<div>Hellow, World</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
JSX
一個(gè)React組件中,render方法中return出去的內(nèi)容就是這個(gè)組件將要渲染的內(nèi)容,然后Babel 會(huì)把 JSX 轉(zhuǎn)譯成一個(gè)名為 React.createElement() 函數(shù)調(diào)用。
React.createElement(
'div',
{},
'Hello, World'
)
React.createElement() 接收三個(gè)參數(shù):
第一個(gè)參數(shù)是必填,傳入的是似HTML標(biāo)簽名稱: ul, li, div;
第二個(gè)參數(shù)是選填,表示的是屬性: className;
第三個(gè)參數(shù)是選填, 子節(jié)點(diǎn): 要顯示的文本內(nèi)容;
React.createElement() 會(huì)預(yù)先執(zhí)行一些檢查,以幫助你編寫無(wú)錯(cuò)代碼,但實(shí)際上它創(chuàng)建了一個(gè)這樣的對(duì)象:
// 注意:這是簡(jiǎn)化過的結(jié)構(gòu)
const element = {
type: 'div',
props: {
className: '',
children: 'Hello, world!'
}
};
元素渲染
與瀏覽器的 DOM 元素不同,React 元素是創(chuàng)建開銷極小的普通對(duì)象。React DOM 會(huì)負(fù)責(zé)更新 DOM 來(lái)與 React 元素保持一致。
想要將一個(gè) React 元素渲染到根 DOM 節(jié)點(diǎn)中,只需把它們一起傳入 ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
render方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)為我們的 React 根級(jí)組件,第二個(gè)參數(shù)接收一個(gè) DOM 節(jié)點(diǎn),代表我們將把和 React 應(yīng)用掛載到這個(gè) DOM 節(jié)點(diǎn)下,進(jìn)而渲染到瀏覽器中。
組件 & props
組件,從概念上類似于 JavaScript 函數(shù)。它接受任意的入?yún)ⅲ?“props”),并返回用于描述頁(yè)面展示內(nèi)容的 React 元素。
函數(shù)組件:
function Welcome(props){
renter (
<h1> Hello, {props.name} </h1>
)
}
<Welcome name="World"/>
該函數(shù)是一個(gè)有效的 React 組件,因?yàn)樗邮瘴ㄒ粠в袛?shù)據(jù)的 “props”(代表屬性)對(duì)象與并返回一個(gè) React 元素。這類組件被稱為“函數(shù)組件”,因?yàn)樗举|(zhì)上就是 JavaScript 函數(shù)。
class組件:
class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>
組件名稱必須以大寫字母開頭。
組件無(wú)論是使用函數(shù)聲明還是通過 class 聲明,都決不能修改自身的 props。
State & 生命周期
State 與 props 類似,但是 state 是私有的,并且完全受控于當(dāng)前組件。
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用,也就是掛載
}
componentWillUnmount() {
//當(dāng)DOM組件Clock被刪除時(shí),會(huì)調(diào)用,也就是卸載
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
修改state中數(shù)據(jù):
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用,也就是掛載
this.timer = setInterval(()=>{
this.tick()
},1000)
}
tick(){
this.setState({
date: new Date()
})
}
componentWillUnmount() {
//當(dāng)DOM組件Clock被刪除時(shí),會(huì)調(diào)用,也就是卸載
clearInterval(this.timer)
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
不要直接修改 State,構(gòu)造函數(shù)是唯一可以給 this.state 賦值的地方
this.setState({name: 'World'})
1
State 的更新可能是異步的,要解決這個(gè)問題,可以讓setState接受一個(gè)函數(shù)而不是一個(gè)對(duì)象,這個(gè)函數(shù)用上一個(gè) state 作為第一個(gè)參數(shù),將此次更新被應(yīng)用時(shí)的 props 做為第二個(gè)參數(shù):
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件處理
React 事件的命名采用小駝峰式(camelCase),而不是純小寫。
使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù),而不是一個(gè)字符串。
在 React 中一個(gè)不同點(diǎn)是你不能通過返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault 。例如,傳統(tǒng)的 HTML 中阻止鏈接默認(rèn)打開一個(gè)新頁(yè)面,你可以這樣寫:
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React 中,可能是這樣的:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
class函數(shù)中綁定this
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此語(yǔ)法確保 handleClick
內(nèi)的 this
已被綁定。
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
在循環(huán)中,通常我們會(huì)為事件處理函數(shù)傳遞額外的參數(shù)
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
列表和key
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
語(yǔ)法
在 JSX 中所有的屬性都要更換成駝峰式命名,比如 onclick 要改成 onClick,唯一比較特殊的就是 class,因?yàn)樵?JS 中 class 是保留字,我們要把 class 改成 className 。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com