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里面的東西全部刪掉，重寫(xiě)了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)簽名稱(chēng): ul, li, div;
第二個(gè)參數(shù)是選填，表示的是屬性: className;
第三個(gè)參數(shù)是選填, 子節(jié)點(diǎn): 要顯示的文本內(nèi)容;
React.createElement() 會(huì)預(yù)先執(zhí)行一些檢查，以幫助你編寫(xiě)無(wú)錯(cuò)代碼，但實(shí)際上它創(chuàng)建了一個(gè)這樣的對(duì)象：
// 注意：這是簡(jiǎn)化過(guò)的結(jié)構(gòu)
const element = {
type: 'div',
props: {
className: '',
children: 'Hello, world!'
}
};
元素渲染
與瀏覽器的 DOM 元素不同，React 元素是創(chuàng)建開(kāi)銷(xiāo)極小的普通對(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
組件，從概念上類(lèi)似于 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 元素。這類(lèi)組件被稱(chēng)為“函數(shù)組件”，因?yàn)樗举|(zhì)上就是 JavaScript 函數(shù)。
class組件：
class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>
組件名稱(chēng)必須以大寫(xiě)字母開(kāi)頭。
組件無(wú)論是使用函數(shù)聲明還是通過(guò) class 聲明，都決不能修改自身的 props。
State & 生命周期
State 與 props 類(lèi)似，但是 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è)問(wèn)題，可以讓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），而不是純小寫(xiě)。
使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。
在 React 中一個(gè)不同點(diǎn)是你不能通過(guò)返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault 。例如，傳統(tǒng)的 HTML 中阻止鏈接默認(rèn)打開(kāi)一個(gè)新頁(yè)面，你可以這樣寫(xiě)：
<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://m.gyxygd.cn