目錄

• React-day01 入門(mén)知識(shí)
  • React介紹
    • 官網(wǎng)
  • React開(kāi)發(fā)環(huán)境初始化 SPA
    • 腳手架初始化項(xiàng)目（方便，穩(wěn)定）*
    • 通過(guò)webpack進(jìn)行初始化
    • 配置鏡像地址
  • 開(kāi)發(fā)工具配置
  • 元素渲染
  • 組件及組件狀態(tài)
    • 函數(shù)定義組件(無(wú)狀態(tài))
    • 類(lèi)定義組件(有狀態(tài))*
    • 組合組件
    • Props屬性*
    • State狀態(tài)*
  • 組件生命周期
  • 事件處理
    • 定義組件事件
    • 屬性初始化器語(yǔ)法*
    • 參數(shù)傳遞*
    • 計(jì)數(shù)器游戲
  • style樣式(JSX寫(xiě)法)

React-day01 入門(mén)知識(shí)

React介紹

Facebook臉書(shū)-> Instagram照片墻 。 于2013年5月開(kāi)源

幫助開(kāi)發(fā)者簡(jiǎn)潔、直觀地構(gòu)建高性能的UI界面

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

官網(wǎng)

官方網(wǎng)站： https://reactjs.org/

中文網(wǎng)站： https://doc.react-china.org/

React開(kāi)發(fā)環(huán)境初始化 SPA

• react ：React開(kāi)發(fā)必備庫(kù)
• react-dom：web開(kāi)發(fā)時(shí)使用的庫(kù)，用于虛擬DOM，移動(dòng)開(kāi)發(fā)使用ReactNative

腳手架初始化項(xiàng)目（方便，穩(wěn)定）*

• 執(zhí)行初始化命令：

  #保證Node版本>=6 npm install -g create-react-app create-react-app my-appcd my-app npm start ## 如果npm版本5.2.0+，可以使用npx進(jìn)行初始化 npx create-react-app my-appcd my-app npm start

• npm和yarn命令對(duì)比

通過(guò)webpack進(jìn)行初始化

步驟文檔

配置鏡像地址

• 查看當(dāng)前鏡像配置：

  npm config list

  npm config get registry

• 設(shè)置當(dāng)前鏡像地址

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

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

開(kāi)發(fā)工具配置

• 添加JavaScript語(yǔ)法支持
• 安裝開(kāi)發(fā)插件： JavaScript，npm, markdown, Node.js, Reactjs

元素渲染

• 元素是構(gòu)成React應(yīng)用的最小單位

  import React from 'react'; import ReactDOM from 'react-dom';const element = (<div><h1>HaHa!</h1><h2>Hello Itheima element</h2></div> );// ReactDOM進(jìn)行元素渲染 ReactDOM.render(element,document.getElementById('root') );

• React對(duì)JSX語(yǔ)法轉(zhuǎn)換

  const element = ( <div className="eleClass"> HaHa! </div> );

  轉(zhuǎn)換js后

  const element = React.createElement("div",{ className: "eleClass" },"HaHa!" );

組件及組件狀態(tài)

組件可以將界面分割成獨(dú)立的、可復(fù)用的組成部分。只需要專(zhuān)注于構(gòu)建每個(gè)單獨(dú)的部分。比如按鈕，對(duì)話框，列表，輸入框都是組件。

• 組件可以接受參數(shù)（props）,可以返回一個(gè)在頁(yè)面上展示的React元素

函數(shù)定義組件(無(wú)狀態(tài))

無(wú)狀態(tài)組件：一般用于簡(jiǎn)單的頁(yè)面展示

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

類(lèi)定義組件(有狀態(tài))*

• class 必須要ES6支持

有狀態(tài)組件：可以維護(hù)自己的狀態(tài)State信息，完成更加復(fù)雜的顯示邏輯

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

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

類(lèi)定義組件名稱(chēng)必須是大寫(xiě)

建議在return元素時(shí)，用小括號(hào)()包裹

組合組件

• 組件之間可以相互引用，通常把App作為根組件

  // 用類(lèi)定義 名為Hello組件 class Hello extends React.Component {render() {return <h1>Hello {this.props.name} !</h1>;} } // 根組件 function App(props) {return (<div><div><h2>團(tuán)隊(duì)名稱(chēng): {props.team}</h2><p>成員個(gè)數(shù): {props.count}</p><p>成立時(shí)間: {props.date.toLocaleString()}</p></div><Hello name="悟空" /><Hello name="八戒" /><Hello name="沙僧" /><Hello name="三藏" /></div>); } // react進(jìn)行元素渲染 ReactDOM.render(<App team="西天取經(jīng)團(tuán)" count={4} date={new Date()}/>,document.getElementById('root') );

  ?

• 注意：組件的返回值只能有一個(gè)根元素，所以用一個(gè)div包裹所有Hello元素

• 在google插件市場(chǎng)搜索安裝React查看DOM結(jié)構(gòu)

Props屬性*

• props有兩種輸入方式：
  • 引號(hào)"" ：輸入字符串值，
  • 大括號(hào){} ：輸入JavaScript表達(dá)式，大括號(hào)外不要再添加引號(hào)。
• props的值不可修改，屬性只讀，強(qiáng)行修改報(bào)錯(cuò)
• 類(lèi)定義組件中使用props需要在前邊加 this.

State狀態(tài)*

• 自動(dòng)更新的時(shí)鐘

  class Clock extends Component {render(){return (<div><h1>當(dāng)前時(shí)間:</h1><h3>current: {new Date().toLocaleString()}</h3></div>);} }setInterval(() => {ReactDOM.render(<Clock />,document.getElementById('root')); }, 1000);

  應(yīng)用一般執(zhí)行一次ReactDOM.reader() 渲染

  在組件內(nèi)部進(jìn)行更新， 每個(gè)時(shí)鐘內(nèi)部都維護(hù)一個(gè)獨(dú)立的date信息

• 在組件內(nèi)部使用局部state狀態(tài)屬性

  class Clock extends Component {constructor(props) {super(props);// state定義:在constructor構(gòu)造函數(shù)進(jìn)行state狀態(tài)的初始化this.state = {title: "時(shí)鐘標(biāo)題",date: new Date()};setInterval(() => {this.tick();}, 1000);}tick(){// 更新date, 數(shù)據(jù)驅(qū)動(dòng), 必須通過(guò)setState函數(shù)修改數(shù)據(jù)并更新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 一般在構(gòu)造函數(shù)初始化。this.state={...}
• state可以修改，必須通過(guò)this.setState({...})更新并渲染組件
• 調(diào)用setState更新?tīng)顟B(tài)時(shí)，React最自動(dòng)將最新的state合并到當(dāng)前state中。

組件生命周期

• 生命周期常用的函數(shù)

  componentDidMount：組件已掛載， 進(jìn)行一些初始化操作

  componentWillUnmount： 組件將要卸載，進(jìn)行回收操作，清理任務(wù)

事件處理

定義組件事件

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

屬性初始化器語(yǔ)法*

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

參數(shù)傳遞*

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

參數(shù)要和調(diào)用者傳入的一一對(duì)應(yīng)

計(jì)數(shù)器游戲

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

style樣式(JSX寫(xiě)法)

直接寫(xiě)在style屬性中

<button style={{width: 200, height: 200}}>我是按鈕</button>

通關(guān)變量聲明樣式并引用

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaocongcong888/p/9436171.html

總結(jié)

以上是生活随笔為你收集整理的React01的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。