React基本使用 - 學習筆記
文章出處： 拉 勾 大前端 高薪訓練營
1. React 介紹
React 是一個用于構建用戶界面的 javaScript 庫，它只負責應用的視圖層，幫助開發人員構建快速且交互式的 web 應用程序。
React 使用組件的方式構建用戶界面。
2. JSX 語法
在 React 中使用 JSX 語法描述用戶界面，它是一種 javaScript 語法擴展。
在 React 代碼執行之前，Babel 會將 JSX 語法轉換為標準的 JavaScript API。
JSX 語法就是一種語法糖，讓開發人員使用更加舒服的代碼構建用戶界面。
const user = { firstName: 'Harper', lastName: 'Perez' } function formatName(user) { return user.firstName + ' ' + user.lastName; } const element =
Hello, {formatName(user)}!
;1
2
3
4
5
6
7
8
JSX 本身其實也是一種表達式，將它賦值給變量，當作參數傳入，作為返回值都可以。
function getGreeting(user) { if (user) { return
Hello, {formatName(user)}!
; } returnHello, Stranger.
; }1
2
3
4
5
6
如果屬性值為字符串類型，需要加引號，屬性名稱推薦采用駝峰式命名法。
const element =
;1
如果屬性值為JavaScript表達式，屬性值外面加大括號。
const element = ; // 注意大括號外面不能加引號，JSX 會將引號當中的內容識別為字符串而不是表達式
1
2
如果 JSX 是單標記，必須閉合，否則報錯。
const element = const element =
1
2
為 JSX 標記添加類名需要使用 className，而不是class。
const element = ;
1
const ary = [
哈哈
,呵呵
,嘿嘿
]; const element = ({ary}
); // 解析后 /* 哈哈
呵呵
嘿嘿
1
2
3
4
5
6
7
8
9
10
11
12
{ boolean ?
Hello React
: null } { boolean && Hello React
}1
2
const persons = [{ id: 1, name: '張三', age: 20 }, { id: 2, name: '李四', age: 15 }, { id: 3, name: '王五', age: 22 }]
1
2
3
4
5
6
7
8
9
10
11
12
13
- { persons.map(person =>
- {person.name} {person.age} ) }
1
2
3
{/* 第一個參數即是事件對象 不需傳遞 */} {/* 需要傳遞事件對象 */} {/* 最后一個參數即是事件對象 不需傳遞 */}
1
2
3
4
5
6
constructor () { this.eventHandler = this.eventHandler.bind(this) } eventHandler () {}
1
2
3
4
5
class App extends Component { render() { const style = {width: 200, height: 200, backgroundColor: 'red'}; return
} }1
2
3
4
5
6
// Button.js import styles from './Button.module.css'; class Button extends Component { render() { return ; } }
1
2
3
4
5
6
7
import './styles.css'
1
class Input extends Component { constructor() { super() this.inputRef = React.createRef() } render() { return (
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Input extends Component { render() { return (
(this.input = input)} />
) } }1
2
3
4
5
6
7
8
9
10
不推薦使用，在嚴格模式下報錯。
class Input extends Component { render() { return (
1
2
3
4
5
6
7
8
9
10
點擊按鈕讓 input 文本框獲取焦點。
input 文本框以及讓文本框獲取焦點的方法定義在 Input 組件中，在 App 組件中引入 Input 組件，按鈕定義在 App 組件中。
// Input.js class Input extends Component { constructor() { super() this.inputRef = React.createRef() this.focusInput = this.focusInput.bind(this) } focusInput() { this.inputRef.current.focus() } render() { return (
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// App.js class App extends Component { constructor() { super() this.InputComponentRef = React.createRef() } render() { return (
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3. 組件
React 是基于組件的方式進行用戶界面開發的. 組件可以理解為對頁面中某一塊區域的封裝。
import React, { Component } from 'react'; class App extends Component { render () { return
Hello, 我是類組件
} }1
2
3
4
5
6
const Person = () => { return
Hello, 我是函數型組件
; }1
2
3
注意事項
組件名稱首字母必須大寫，用以區分組件和普通標簽。
jsx語法外層必須有一個根元素
在調用組件時可以向組件內部傳遞數據，在組件中可以通過 props 對象獲取外部傳遞進來的數據。
1
2
// 類組件 class Person extends Component { render() { return (
姓名：{this.props.name}
年齡：{this.props.age}
1
2
3
4
5
6
7
8
9
10
11
// 函數組件 const Person = props => { return (
姓名：{props.name}
年齡：{props.age}
1
2
3
4
5
6
7
8
9
注意：
props 對象中存儲的數據是只讀的，不能在組件內部被修改。
當 props 數據源中的數據被修改后，組件中的接收到的 props 數據會被同步更新。( 數據驅動DOM )
class App extends Component { static defaultProps = {} }
1
2
3
function ThemedButton(props) { } ThemedButton.defaultProps = { theme: "secondary", label: "Button Text" };
1
2
3
4
5
6
通過 props.children 屬性可以獲取到在調用組件時填充到組件標簽內部的內容。
1
const Person = (props) => { return (
{props.children}
); }1
2
3
4
5
在React中, 關于數據流動有一條原則, 就是單向數據流動, 自頂向下, 從父組件到子組件.
單向數據流特性要求我們共享數據要放置在上層組件中.
子組件通過調用父組件傳遞過來的方法更改數據.
當數據發生更改時, React會重新渲染組件樹.
單向數據流使組件之間的數據流動變得可預測. 使得定位程序錯誤變得簡單.
類組件除了能夠從外部 (props) 接收狀態數據以外還可以擁有自己的狀態 (state)，此狀態在組件內部可以被更新，狀態更新 DOM 更新。
組件內部的狀態數據被存儲在組件類中的 state 屬性中，state 屬性值為對象類型，屬性名稱固定不可更改。
class App extends Component { constructor () { super() this.state = { person: { name: '張三', age: 20 }, } } render () { return (
{this.state.person.name} {this.state.person.age}
); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
state 狀態對象中的數據不可直接更改，如果直接更改 DOM 不會被更新，要更改 state 狀態數據需要使用 setState方法。
class App extends Component { constructor () { this.state = { person: { name: '張三', age: 20 }, } this.changePerson = this.changePerson.bind(this) } changePerson () { this.setState({ person: { name: '李四', age: 15 } }) } render() { return (
{this.state.person.name} {this.state.person.age}
); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
雙向數據綁定是指，組件類中更新了狀態，DOM 狀態同步更新，DOM 更改了狀態，組件類中同步更新。組件 <=> 視圖。
要實現雙向數據綁定需要用到表單元素和 state 狀態對象。
class App extends Component { constructor () { this.state = { name: "張三" } this.nameChanged = this.nameChanged.bind(this) } nameChanged (event) { this.setState({name: event.target.value}); } render() { return (
{this.state.name}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const Person = props => { return ; }
1
2
3
在組件完成更新之前需要做某種邏輯或者計算，就需要用到快照
componentDidUpdate(prevProps, prevState, snapshot) {}
1
getSnapshotBeforeUpdate 方法會在組件完成更新之前執行，用于執行某種邏輯或計算，返回值可以在 componentDidUpdate 方法中的第三個參數中獲取，就是說在組件更新之后可以拿到這個值再去做其他事情。
getSnapshotBeforeUpdate(prevProps, prevState) { return 'snapshot' }
1
2
3
通過 Context 可以跨層級傳遞數據
// userContext.js import React from "react" const userContext = React.createContext("default value") const UserProvider = userContext.Provider const UserConsumer = userContext.Consumer export { UserProvider, UserConsumer }
1
2
3
4
5
6
7
8
// App.js import { UserProvider } from "./userContext" class App extends Component { render() { return (
1
2
3
4
5
6
7
8
9
10
11
// C.js import { UserConsumer } from "./userContext" export class C extends Component { render() { return (
{username}
}} 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
context 的另一種用法
// userContext.js export default userContext
1
2
// C.js import userContext from "./userContext" export class C extends Component { static contextType = userContext render() { return (
{this.context}
) } }1
2
3
4
5
6
7
8
9
10
11
12
13
4. 表單
表單控件中的值由組件的 state 對象來管理，state對象中存儲的值和表單控件中的值時同步狀態的
class App extends Component { constructor () { this.state = { username: "" } this.nameChanged = this.nameChanged.bind(this) } nameChanged (e) { this.setState({username: e.target.value}) } render() { return (
) } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
表單元素的值由 DOM 元素本身管理。
class App extends Component { constructor () { this.onSubmit = this.onSubmit.bind(this) } onSubmit(e) { console.log(this.username.value) e.preventDefault(); } render(
) }1
2
3
4
5
6
7
8
9
10
11
12
13
14
5. 路由
url地址與組件之間的對應關系，訪問不同的url地址顯示不同的組件。
下載：npm install react-router-dom
// App.js import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function Index() { return
首頁
; } function News() { return 新聞
; } function App() { return ( 首頁 新聞
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function News(props) { return (
公司新聞 行業新聞
公司新聞
} function IndustryNews() { return 行業新聞
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import url from 'url'; class News extends Component { constructor(props) { super(props); this.state = { list: [{ id: 1, title: '新聞1' }, { id: 2, title: '新聞2' }] } } render() { return (
新聞列表組件
- this.state.list.map((item, index) => { return (
- {item.title} ); })
新聞詳情
} }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Redirect } from 'react-router-dom'; class Login extends Component { render() { if (this.state.isLogin) { return
1
2
3
4
5
6
7
8
9
NAT React
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
