1、React簡介

1.1、React概述

React 是用于構建用戶界面的 javascript 庫，具有聲明式、組件化等特點。

1.2、MVC和MVVM模式

MVC（Model-View-Controller，模型-視圖-控制器），Model指模型數據，View是顯示的界面，Controller是控制層，控制層用于接收到用戶的操作，然后進行一系列的處理后，發送給Model，接收到Model的響應后再交給View視圖層。

MVVM（Model-View-ViewModel，模型-視圖-視圖模型），Model指模型數據，View是指瀏覽器渲染的網頁，ViewMode是Model和View的橋梁，稱為視圖模型，由ViewModel完成數據的綁定。

在Vue中，JS對象就是Model，HTML標簽就是View，Vue實例就是ViewModel。

2、React環境搭建

2.1、使用webpack搭建React開發環境

參考博客：https://blog.csdn.net/p445098355/article/details/104517094

2.2、使用create-react-app腳手架

安裝腳手架

cnpm i -g create-react-app

創建項目

create-react-app 項目名稱

3、JSX語法

jsx 全程是 javascript XML ，是一個 JavaScript 的語法擴展。jsx 要按照 xml 的編寫規范，即：

• 最外層只能有一個根標記；
• 每個標記都必須要有閉合標簽；

在 jsx 中可以使用 {...} 來編寫 javascript 表達式。

4、React組件

4.1、函數組件

使用構造函數聲明的組件被稱為函數組件，因其內部沒有 state 屬性，所以又被稱為無狀態組件，代碼如下：

import React from 'react'; import ReactDOM from 'react-dom';const App = () => {return (<div>函數組件</div>) }ReactDOM.render(<App />,document.getElementById('root'));

可以通過 props 屬性獲取到組件標簽上定義的屬性值，例如：

import React from 'react'; import ReactDOM from 'react-dom';const App = (props) => {return (<div>函數組件，props值： {props.name}</div>) }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.2、類組件

使用 class 關鍵字創建的組件，稱為類組件，因其內部可以有 state 屬性，又被稱為有狀態組件，代碼如下：

import React from 'react'; import ReactDOM from 'react-dom';class App extends React.Component {render() {return (<div>類組件</div>)} }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

在使用類組件的標簽時，標簽上定義的屬性都會通過類組件的構造函數，傳遞到組件內部，然后在組件內容使用 this.props 獲取到外界的傳值，代碼如下：

import React from 'react'; import ReactDOM from 'react-dom';class App extends React.Component {//構造函數constructor(props){super(props)console.log(props)}render() {return (<div>類組件，props值： {this.props.name}</div>)} }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

每個類組件都有自己獨享的內部狀態，即 state 屬性。如果要操作 state 必須要使用 setState() 函數，該函數是一個異步函數，對 state 修改后，會再次調用 render() 函數重新渲染頁面。

class App extends React.Component {//構造函數constructor(props){super(props)this.state = {value: 'hello'}}//按鈕點擊事件，接收到視圖層的指令，操作數據模型，最后在把操作結果返回給視圖handleClick(str){this.setState({value: str})}render() {return (<div>{this.state.value}<button onClick={this.handleClick.bind(this,'world')}>修改state</button></div>)} }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.3、函數組件和類組件的區別

在說明函數組件和類組件的區別時，要看3個方面：

• 組件內是否有 this ；
• 組件內是否有 state ;
• 組件內是否有生命周期鉤子；

只要符合上面的3點，就是一個有狀態組件，即類組件。

4.4、組件通信

父組件向子組件傳值

import React from 'react'; import ReactDOM from 'react-dom'; // import App from './App';class App extends React.Component {render(){return (<div>{/* 自定義組件，可以在組件上自定義屬性 */}<Button text="百度一下" subText="點擊提交數據" textColor="red"/></div>)} }//無狀態組件，只顯示UI效果，沒有太多的業務邏輯 const Button = (props) => {return (<button title={props.subText} style={{color: props.textColor}}>{props.text}</button>) }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

子組件向父組件傳值

import React from 'react'; import ReactDOM from 'react-dom'; // import App from './App';class App extends React.Component {//自定義組件的點擊事件，text為默認參數，即封裝Button組件時傳入的一個參數handleClick(text){console.log('自定義組件被點擊了。。。。',text)}render(){return (<div>{/* 自定義組件，可以在組件上自定義屬性，也可以自定義事件 */}<Button text="百度一下" subText="點擊提交數據" textColor="red" onClick={this.handleClick.bind(this)}/></div>)} }//無狀態組件，只顯示UI效果，沒有太多的業務邏輯 const Button = (props) => {return (<button title={props.subText} style={{color: props.textColor}} onClick={()=>{props.onClick(props.text)}}>{props.text}</button>) }ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.5、封裝自定義組件

自定義按鈕組件

import React, { Component } from 'react'export default class Button extends Component {//HTML的button標簽原生點擊事件函數handleClick(){this.props.onClick()}render() {return (<div><button style={{color: this.props.fontColor}} onClick={this.handleClick.bind(this)}>{this.props.text}</button></div>)} }

自定義輸入框組件

import React, { Component } from 'react'export default class Input extends Component {//input標簽原生鍵盤事件的函數handlePress(e){if(e.charCode === 13){this.props.onEnter(e.target.value)}}render() {return (<div><input onKeyPress={this.handlePress.bind(this)}></input></div>)} }

在父組件中使用自定義組件

import React, { Component } from 'react' import Button from './Button' import Input from './Input'export default class App extends Component {handleClick(){console.log('click....')}//Input組件上的回車事件handleEnter(val){console.log('enter...',val)}render() {return (<div><Input onEnter={this.handleEnter.bind(this)}></Input><Button text="提交" fontColor="red" onClick={this.handleClick.bind(this)}></Button></div>)} }

5、UI組件庫

5.1、使用Element-React組件庫

需要安裝：

# 安裝element-react cnpm i element-react --save# 安裝elementui的主題 cnpm install element-theme-default --save# 按鈕react-hot-loader cnpm install react-hot-loader@next -D

Button組件使用案例：

import React, { Component } from 'react' import {Button } from 'element-react' import 'element-theme-default'export default class App extends Component {constructor(){super()this.state = {isLoading: false,btnText: '點擊下載'}}handleLoading = ()=>{this.setState({btnText: '下載中',isLoading: true},()=>{//模擬下載過程setTimeout(()=>{this.setState({btnText: '下載完成',isLoading: false})},2000)})}render() {return (<div><Button type="info" loading={this.state.isLoading} onClick={this.handleLoading}>{this.state.btnText}</Button><Button>上傳<i className="el-icon-upload2"></i></Button></div>)} }

Menu和Table組件的使用案例：

import React, { Component } from 'react' import {Button,Menu,Table } from 'element-react' import 'element-theme-default'export default class App extends Component {constructor(){super()this.state = {column: [{label: '姓名',prop: 'name'},{label: '年齡',prop: 'age'},{label: '電話',prop: 'phone'},{label: '操作',render: (obj,e,index)=>{ //渲染函數的默認參數為當前點擊的數據對象return (<React.Fragment><Button type="info" size="small">修改</Button> &nbsp;&nbsp;<Button type="danger" size="small">刪除</Button></React.Fragment>)}}],data: [{name: '張三',age: 20,phone: '13099998888'},{name: '李四',age: 21,phone: '13099998888'},{name: '王五',age: 22,phone: '13099998888'}]}}render() {return (<div><Menu mode="horizontal" theme="dark" defaultActive="1" style={{marginBottom: '20px'}}><Menu.Item index="1">首頁</Menu.Item><Menu.SubMenu index="2" title="新聞"><Menu.Item index="2-1">國內新聞</Menu.Item><Menu.Item index="2-2">國際新聞</Menu.Item><Menu.Item index="2-3">社會新聞</Menu.Item></Menu.SubMenu></Menu><Table style={{width: '100%'}} columns={this.state.column} data={this.state.data}></Table></div>)} }

5.2、Ant Design UI庫

安裝

cnpm i antd --save

引入組件

# 按需引入 import { DatePicker } from 'antd';# 引入樣式 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

6、路由

BrowserRouter

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 來保持 UI 和 URL 的同步。一個應用程序中只需要有一個 <BrowserRouter> 即可。

在 index.js 中使用：

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {BrowserRouter} from 'react-router-dom'ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'));

HashRouter

<HashRouter> 使用 URL 的 hash 部分（即 window.location.hash）來保持 UI 和 URL 的同步。與 <BrowserRouter> 用法類似，但是 <HashRouter> 在頁面中顯示的路由地址里有 # 符號。

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {HashRouter} from 'react-router-dom'ReactDOM.render(<HashRouter><App /></HashRouter>,document.getElementById('root'));

Link

為你的應用提供聲明式的、可訪問的導航鏈接。

import { Link } from 'react-router-dom';<Link to="/about">About</Link>

配合 Route 使用。

Route

<Route> 可能是 React Router 中最重要的組件，它可以幫助你理解和學習如何更好的使用 React Router。它最基本的職責是在其 path 屬性與某個 location 匹配時呈現一些 UI。

import { BrowserRouter as Router, Route } from 'react-router-dom';<Router><div><Route exact path="/" component={Home} /><Route path="/news" component={News} /></div> </Router>

Link、Route配合使用案例：

import React, { Component } from 'react' import {Menu} from 'element-react' import 'element-theme-default' import {Link,Route,Switch} from 'react-router-dom'export default class App extends Component {render() {return (<div><Menu mode="horizontal" theme="dark" defaultActive="1" style={{marginBottom: '20px'}}><Menu.Item index="1">首頁</Menu.Item><Menu.SubMenu index="2" title="新聞"><Menu.Item index="2-1"><Link to="/guonei">國內新聞</Link></Menu.Item><Menu.Item index="2-2"><Link to="/guoji">國際新聞</Link></Menu.Item><Menu.Item index="2-3"><Link to="/shehui">社會新聞</Link></Menu.Item></Menu.SubMenu></Menu><Switch><Route path="/guonei" component={GuoneiNews}></Route><Route path="/guoji" component={GuojiNews}></Route><Route path="/shehui" component={ShehuiNews}></Route></Switch></div>)} }

參考博客：https://www.jianshu.com/p/97e4af32811a

7、Redux狀態管理

Store

用于連接 action 和 reducer 重要對象，一個redux應用程序中只能有一個 store 對象。

import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp)

Reducer

Reducers 指定了應用狀態的變化如何響應 actions 并發送到 store 的，記住 actions 只是描述了有事情發生了這一事實，并沒有描述應用如何更新 state。

Action

Action 是把數據從應用（譯者注：這里之所以不叫 view 是因為這些數據有可能是服務器響應，用戶輸入或其它非 view 的數據 ）傳到 store 的有效載荷。它是 store 數據的唯一來源。一般來說你會通過 store.dispatch() 將 action 傳到 store。

const action = {type: "ADD_TODO",text: 'Build my first Redux app' }

核心API

在使用redux時，需要掌握的核心API：

• store.getState() ：用于獲取最新的store對象
• store.subscrbe() ：用于監聽store中的數據變化
• store.dispatch() ：用于向reducer派發action對象

總結

以上是生活随笔為你收集整理的React简介及基础用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。