目錄
- React-day01 入門知識
- React介紹
- 官網
- React開發環境初始化 SPA
- 腳手架初始化項目（方便，穩定）*
- 通過webpack進行初始化
- 配置鏡像地址
- 開發工具配置
- 元素渲染
- 組件及組件狀態
- 函數定義組件(無狀態)
- 類定義組件(有狀態)*
- 組合組件
- Props屬性*
- State狀態*
- 組件生命周期
- 事件處理
- 定義組件事件
- 屬性初始化器語法*
- 參數傳遞*
- 計數器游戲
- style樣式(JSX寫法)
- React介紹
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 startnpm和yarn命令對比
通過webpack進行初始化
步驟文檔
配置鏡像地址
查看當前鏡像配置：
npm config listnpm 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中。
- 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屬性中
<button style={{width: 200, height: 200}}>我是按鈕</button>通關變量聲明樣式并引用
const btnStyle = { width: 200, height: 200 }; ... <button style={btnStyle} onClick={this.handleClick}>我是按鈕</button>?
))唉))
