當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React01

發布時間：2023/12/13 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 React01 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

React-day01 入門知識
- React介紹
  - 官網
- React開發環境初始化 SPA
  - 腳手架初始化項目（方便，穩定）*
  - 通過webpack進行初始化
  - 配置鏡像地址
- 開發工具配置
- 元素渲染
- 組件及組件狀態
  - 函數定義組件(無狀態)
  - 類定義組件(有狀態)*
  - 組合組件
  - Props屬性*
  - State狀態*
- 組件生命周期
- 事件處理
  - 定義組件事件
  - 屬性初始化器語法*
  - 參數傳遞*
  - 計數器游戲
- style樣式(JSX寫法)

React-day01 入門知識

React介紹

Facebook臉書-> Instagram照片墻。于2013年5月開源

幫助開發者簡潔、直觀地構建高性能的UI界面

高效：模擬Doument Object Model，減少DOM交互 (速度快)
靈活：可以與已知的庫配合使用
聲明式：幫助開發者直觀的創建UI
組件化：把相似的代碼通過封裝成組件進行復用

官網

官方網站： https://reactjs.org/

中文網站： https://doc.react-china.org/

React開發環境初始化 SPA

react ：React開發必備庫
react-dom：web開發時使用的庫，用于虛擬DOM，移動開發使用ReactNative

腳手架初始化項目（方便，穩定）*

執行初始化命令：
#保證Node版本>=6 npm install -g create-react-app create-react-app my-appcd my-app npm start ## 如果npm版本5.2.0+，可以使用npx進行初始化 npx create-react-app my-appcd my-app npm start
npm和yarn命令對比

通過webpack進行初始化

步驟文檔

配置鏡像地址

查看當前鏡像配置：

npm config list

npm config get registry
設置當前鏡像地址

npm config set registry https://registry.npm.taobao.org/

npm config set disturl https://npm.taobao.org/dist

開發工具配置

添加JavaScript語法支持
安裝開發插件： JavaScript，npm, markdown, Node.js, Reactjs

元素渲染

元素是構成React應用的最小單位
import React from 'react'; import ReactDOM from 'react-dom';const element = (<div><h1>HaHa!</h1><h2>Hello Itheima element</h2></div> );// ReactDOM進行元素渲染 ReactDOM.render(element,document.getElementById('root') );
React對JSX語法轉換
const element = ( <div className="eleClass"> HaHa! </div> );
轉換js后
const element = React.createElement("div",{ className: "eleClass" },"HaHa!" );

組件及組件狀態

組件可以將界面分割成獨立的、可復用的組成部分。只需要專注于構建每個單獨的部分。比如按鈕，對話框，列表，輸入框都是組件。

組件可以接受參數（props）,可以返回一個在頁面上展示的React元素

函數定義組件(無狀態)

無狀態組件：一般用于簡單的頁面展示

// 用函數定義了名為Hello組件 function Hello(props) {return <h1>Hello {props.name} !</h1>; }// react進行元素渲染 ReactDOM.render(<Hello name="itheima props"/>,document.getElementById('root') );

類定義組件(有狀態)*

class 必須要ES6支持

有狀態組件：可以維護自己的狀態State信息，完成更加復雜的顯示邏輯

// 用類定義名為Hello組件 class Hello extends React.Component {render(){return <h1>Hello {this.props.name} !</h1>;} }// react進行元素渲染 ReactDOM.render(<Hello name="itheima class"/>,document.getElementById('root') );

以上兩種組件效果在React相同

類定義組件名稱必須是大寫

建議在return元素時，用小括號()包裹

組合組件

組件之間可以相互引用，通常把App作為根組件
// 用類定義名為Hello組件 class Hello extends React.Component {render() {return <h1>Hello {this.props.name} !</h1>;} } // 根組件 function App(props) {return (<div><div><h2>團隊名稱: {props.team}</h2><p>成員個數: {props.count}</p><p>成立時間: {props.date.toLocaleString()}</p></div><Hello name="悟空" /><Hello name="八戒" /><Hello name="沙僧" /><Hello name="三藏" /></div>); } // react進行元素渲染 ReactDOM.render(<App team="西天取經團" count={4} date={new Date()}/>,document.getElementById('root') );
?
注意：組件的返回值只能有一個根元素，所以用一個div包裹所有Hello元素
在google插件市場搜索安裝React查看DOM結構

Props屬性*

props有兩種輸入方式：
- 引號"" ：輸入字符串值，
- 大括號{} ：輸入JavaScript表達式，大括號外不要再添加引號。
props的值不可修改，屬性只讀，強行修改報錯
類定義組件中使用props需要在前邊加 this.

State狀態*

自動更新的時鐘
class Clock extends Component {render(){return (<div><h1>當前時間:</h1><h3>current: {new Date().toLocaleString()}</h3></div>);} }setInterval(() => {ReactDOM.render(<Clock />,document.getElementById('root')); }, 1000);
應用一般執行一次ReactDOM.reader() 渲染

在組件內部進行更新，每個時鐘內部都維護一個獨立的date信息
在組件內部使用局部state狀態屬性
class Clock extends Component {constructor(props) {super(props);// state定義:在constructor構造函數進行state狀態的初始化this.state = {title: "時鐘標題",date: new Date()};setInterval(() => {this.tick();}, 1000);}tick(){// 更新date, 數據驅動, 必須通過setState函數修改數據并更新uithis.setState({date: new Date()})}render(){return (<div><h1>{this.state.title}</h1><h3>current: {this.state.date.toLocaleString()}</h3></div>);} }ReactDOM.render(<Clock />,document.getElementById('root') );
state特性：
state 一般在構造函數初始化。this.state={...}
state可以修改，必須通過this.setState({...})更新并渲染組件
調用setState更新狀態時，React最自動將最新的state合并到當前state中。

組件生命周期

生命周期常用的函數

componentDidMount：組件已掛載，進行一些初始化操作

componentWillUnmount：組件將要卸載，進行回收操作，清理任務

事件處理

定義組件事件

class App extends Component {handleClick(e){console.log("handleClick!")console.log(this);}render(){return (<div><button onClick={() => this.handleClick()}>按鈕:{'{() => this.handleClick()}'}</button></div>);} }

屬性初始化器語法*

// 屬性初始化器語法 (Property initializer syntax) handleClick = () => {console.log("handleClick!")console.log(this); }

參數傳遞*

class App extends Component {handleClick(e, str, date){ // 參數要和調用者傳入的一一對應console.log(this)console.log(e)console.log(str, date)}render(){return (<button onClick={(e)=>this.handleClick(e, "參數" , new Date())}>按鈕1:{'箭頭函數'}</button>);} }

參數要和調用者傳入的一一對應

計數器游戲

import React, { Component } from 'react'; import ReactDOM from 'react-dom';// 類定義組件的寫法 class App extends Component {constructor(props) {super(props);// 綁定this到事件函數this.countPlus = this.countPlus.bind(this);this.state = { count: 0,timeSurplus: 10};}// 組件已掛載, 開啟周期任務componentDidMount() {this.timerId = setInterval(() => {this.setState((preState) => ({timeSurplus: preState.timeSurplus - 1}))// 在合適的時候, 結束周期函數if(this.state.timeSurplus <= 0){clearInterval(this.timerId)}}, 1000);}countPlus(){// 更新當前count數字.console.log(this)// 如果時間到了, 返回if (this.state.timeSurplus <= 0){return;}// 更新數據會自動觸發UI的重新render// this.setState({// count: this.state.count + 1// })// 通過之前state狀態更新現在的狀態this.setState((preState) => ({count: preState.count + 1}))}render() {return (<div><h1>{this.props.title}</h1><h2>{this.state.timeSurplus <= 0 ? ("時間到, 總數" + this.state.count) : ("剩余時間:" + this.state.timeSurplus)}</h2><button onClick={this.countPlus}>計數: {this.state.count}</button></div>);} }ReactDOM.render(<App title="計數器, 試試你的手速!"/>,document.getElementById('root') );

style樣式(JSX寫法)

直接寫在style屬性中

通關變量聲明樣式并引用

const btnStyle = { width: 200, height: 200 }; ... <button style={btnStyle} onClick={this.handleClick}>我是按鈕</button>

轉載于:https://www.cnblogs.com/xiaocongcong888/p/9436171.html

總結

以上是生活随笔為你收集整理的React01的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：小米MIX Fold 2单边仅5.4mm
下一篇： svn文件大小类型限制，提交必须加多少字