React从入门到入土
生活随笔
收集整理的這篇文章主要介紹了
React从入门到入土
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? React學習
React 的特點
React創(chuàng)建虛擬dom的兩種方式
jsx 創(chuàng)建虛擬dom
<script type="text/babel">// 創(chuàng)建虛擬domconst VDOM = (<h1 id="title"><span>你好,React</span> </h1>)// 渲染虛擬dom到頁面ReactDOM.render(VDOM, document.getElementById("test")); </script>js 創(chuàng)建虛擬dom 一般不用
<script type="text/javascript">// 創(chuàng)建虛擬domconst VDOM = React.creactElemnet("h1",{id:'title'},'你好,React');// 渲染虛擬dom到頁面ReactDOM.render(VDOM, document.getElementById("test"));</script>虛擬dom和真實dom
<script type="text/babel">// 創(chuàng)建虛擬domconst VDOM = (<h1 id="title"><span>你好,React</span></h1>)// 渲染虛擬dom到頁面ReactDOM.render(VDOM, document.getElementById("test"));console.log("虛擬dom", VDOM);console.log(typeof VDOM);console.log(VDOM instanceof Object);/*關于虛擬dom:1. 本質(zhì)上是Object類型的對象(一般對象)2. 虛擬dom比較輕,真實dom比較重,因為虛擬dom是React內(nèi)部在用,無需真實dom那么多的屬性3. 虛擬dom最終會被React轉(zhuǎn)化為真實dom,呈現(xiàn)在頁面上*/</script>jsx 語法規(guī)則
<script type="text/babel">const myid = "aTGUgu";const mydata = "HeLLodfajslfjlas";// 1.創(chuàng)建虛擬domconst VDOM = (<div><h2 className="title" id={myid.toLowerCase()}><span style={{ color: 'red', fontSize: '200px' }}>{mydata.toLowerCase()}</span></h2><h2><input type="text"></input></h2></div>)// 2. 渲染虛擬dom到頁面ReactDOM.render(VDOM, document.getElementById("test"));/*** 標簽中有js表達式,用花括號包裹,花括號里面可以使用表達式* 樣式的類名指定不要用class,要用className* 內(nèi)聯(lián)style使用駝峰命名法* 虛擬dom必須只有一個根標簽 * 標簽必須閉合* 標簽首字母* (1)若小寫字母開頭,則將改標簽轉(zhuǎn)為html中同名元素,若html中無同名元素,報錯* (2)若大寫字母開頭,react就去渲染對應的組件,若組件沒有定義,則報錯 */</script>React 處理數(shù)組
注意:{}里面只能寫表達式,不能寫代碼,如果寫代碼,必須返回參數(shù)
模塊與組件
函數(shù)式組件
<script type="text/babel">// 1. 創(chuàng)建函數(shù)組件function Dome() {console.log(this);// 此處的this是undefined ,因為babel編譯后開啟了嚴格模式return <h2>我是用函數(shù)定義的組件(適用于[簡單組件的定義])</h2>}// 2. 渲染組件到頁面ReactDOM.render(<Dome />, document.getElementById("test"));</script>類的概念
<script type="text/babel">// 創(chuàng)建一個Person類class Person {// 構造器方法constructor(name, age) {// 構造器中的this是誰,this是類的實例對象this.name = namethis.age = age}// 一般方法, speak 被放在了原型對象上,供實例使用// 通過person實例調(diào)用speak時,speak中的this就是person實例 speak() {console.log(`我叫${this.name},我的年齡是${this.age}`);}}// 創(chuàng)建一個person的實例對象const p1 = new Person('tom', 18);const p2 = new Person('jerry', 19);p1.speak();p2.speak();// 繼承class Student extends Person {constructor(name, age, grade) {super(name, age);this.grade = grade;}speak() {console.log(`我叫${this.name},我年齡是${this.age},我讀的是${this.grade}年級`);}study() {// 誰調(diào)用誰就是thisconsole.log("我很努力地學習");}}const s1 = new Student("付立翔", 21, "大二");s1.speak();s1.study();</script>類式組件
<script type="text/babel">// 1. 創(chuàng)建類式組件class MyComponent extends React.Component {// render 放在MyComponent的原型對象上render() {return <h2>我是類定義的組件(適用于[復雜組件的定義])</h2>}}// 2. 渲染組件ReactDOM.render(<MyComponent />, document.getElementById("test"));/*** 1. React解析組件發(fā)現(xiàn)了MyComponent 組件* 2. React 發(fā)現(xiàn)這是一個類組件,React new 出來一個MyComponent 組件實例,并通過組件實例來調(diào)用原型上的方法* 3. React 通過返回的虛擬DOM,轉(zhuǎn)換成真實DOM ,隨后呈現(xiàn)在頁面上*/</script>state
<script type="text/babel">// 1. 定義一個類組件class Weather extends React.Component {constructor(props) {super(props);// 初始化狀態(tài)this.state = {isHot: false,wind:"微風"}// 讓自定義的this指向Weather的實例對象this.demo = this.demo.bind(this);}// 讀東西,做展示render() {// 讀取狀態(tài)const {isHot,wind} = this.statereturn <h1 onClick={ this.demo} >今天天氣很{isHot ? '炎熱' : '寒冷'}{wind}</h1>}// 點擊狀態(tài)發(fā)生改變demo() {// 嚴重注意:狀態(tài)state 不可以直接更改,要借助一個內(nèi)置的API去更改!!!內(nèi)部的信息發(fā)生改變,是一種合并,不是替換// this.state.isHot = !this.state.isHot;console.log(this);const isHot = this.state.isHot;this.setState({isHot:!isHot})console.log('標題別點擊了');}}// 2. 渲染組件到頁面ReactDOM.render(<Weather />, document.getElementById("test"));</script>state精簡
<script type="text/babel">// 1. 定義一個類組件class Weather extends React.Component {// 成員屬性 , 初始化狀態(tài)state = {isHot: false,wind: "微風"}render() {const { isHot, wind } = this.statereturn <h1 onClick={this.demo} >今天天氣很{isHot ? '炎熱' : '寒冷'}{wind}</h1>}/*** 注意箭頭函數(shù)沒有this,如果使用this會向上尋找this*/demo = () => {console.log(this);const isHot = this.state.isHot;this.setState({ isHot: !isHot })console.log('標題別點擊了');}}ReactDOM.render(<Weather />, document.getElementById("test"));</script>props
<body><!-- 準備好一個容器 --><div id="test"></div><div id="test1"></div><div id="test2"></div><!-- 加載 React。--><!-- 注意: 部署時，將 "development.js" 替換為 "production.min.js"。--><script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script><script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 后面一定要使用babel --><script type="text/babel">// 創(chuàng)建組件class Person extends React.Component {render() {const {name,sex,age} = this.props;return (<ul><li>姓名:{name}</li><li>性別:{sex}</li><li>年齡:{age}</li></ul>)}}// 渲染組件到界面ReactDOM.render(<Person name="付立翔" sex="男" age="21" />, document.getElementById("test"));ReactDOM.render(<Person name="黃曉明" sex="男" age="49" />, document.getElementById("test1"));ReactDOM.render(<Person name="馬云" sex="男" age="50" />, document.getElementById("test2"));</script> </body>外部傳參
// 創(chuàng)建組件class Person extends React.Component {render() {const {name,sex,age} = this.props;return (<ul><li>姓名:{name}</li><li>性別:{sex}</li><li>年齡:{age}</li></ul>)}}// 渲染組件到界面const p = {name:"flx",sex:"nan",age:"21"}// ...p 這是展開運算符/*** 詳解見下圖*/ ReactDOM.render(<Person {...p}/>, document.getElementById("test"));ReactDOM.render(<Person name="黃曉明" sex="男" age="49" />, document.getElementById("test1"));ReactDOM.render(<Person name="馬云" sex="男" age="50" />, document.getElementById("test2"));對類型進行限制
<script type="text/babel">// 創(chuàng)建組件class Person extends React.Component {render() {const { name, sex, age } = this.props;return (<ul><li>姓名:{name}</li><li>性別:{sex}</li><li>年齡:{age}</li></ul>)}}// 對傳遞的屬性名進行限制Person.propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number,dd: PropTypes.func,};// 如果沒有傳遞一個屬性值就設置一個默認值Person.defaultProps = {sex: "不男不女",age: 18}// 渲染組件到界面const p = { name: "1", age: 21 }// ...p 這是展開運算符ReactDOM.render(<Person {...p} dd={dd} />, document.getElementById("test"));ReactDOM.render(<Person name="黃曉明" sex="男" age={49} />, document.getElementById("test1"));ReactDOM.render(<Person name="馬云" sex="男" age={50} />, document.getElementById("test2"));function dd() {console.log("我是一個大好人");}</script>props簡寫方式
<script type="text/babel">// 創(chuàng)建組件class Person extends React.Component {// 對傳遞的屬性名進行限制static propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number,dd: PropTypes.func,};// 如果沒有傳遞一個屬性值就設置一個默認值static defaultProps = {sex: "不男不女",age: 18}render() {const { name, sex, age } = this.props;return (<ul><li>姓名:{name}</li><li>性別:{sex}</li><li>年齡:{age}</li></ul>)}}// 渲染組件到界面const p = { name: "1", age: 21 }// ...p 這是展開運算符ReactDOM.render(<Person {...p} dd={dd} />, document.getElementById("test"));ReactDOM.render(<Person name="黃曉明" sex="男" age={49} />, document.getElementById("test1"));ReactDOM.render(<Person name="馬云" sex="男" age={50} />, document.getElementById("test2"));function dd() {console.log("我是一個大好人");}</script>函數(shù)式組件可以使用props
function Person(props) {const { name, sex, age } = props;return (<ul><li>姓名:{name}</li><li>性別:{sex}</li><li>年齡:{age}</li></ul>)}Person.propTypes = {name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number,dd: PropTypes.func,};// 如果沒有傳遞一個屬性值就設置一個默認值Person.defaultProps = {sex: "不男不女",age: 18}const p = { name: "1", age: 21 }// ...p 這是展開運算符ReactDOM.render(<Person {...p} dd={dd} />, document.getElementById("test"));ReactDOM.render(<Person name="黃曉明" sex="男" age={49} />, document.getElementById("test1"));ReactDOM.render(<Person name="馬云" sex="男" age={50} />, document.getElementById("test2"));function dd() {console.log("我是一個大好人");}ref
使用回調(diào)方式創(chuàng)建ref
// 創(chuàng)建組件class Demo extends React.Component {showDate = () => {const { input1 } = this;alert(input1.value);}showDate2 = () => {const { input2 } = this;alert(input2.value);}render() {return (<div><input ref={c => this.input1 = c} type="text" placeholder="點擊按鈕提示數(shù)據(jù)"></input><button ref={c => this.btn = c} onClick={this.showDate}>點擊我提示左側(cè)的數(shù)據(jù)</button><input ref={c => this.input2 = c} onBlur={this.showDate2} type="text" placeholder="失去焦點提示數(shù)據(jù)"></input></div>)}}// 渲染domReactDOM.render(<Demo />, document.getElementById("test"));使用函數(shù)方式創(chuàng)建ref 注意版本問題,低版本沒有這個函數(shù) ,推薦使用這個,可以清晰的看見這個
// 創(chuàng)建組件class Demo extends React.Component {myRef = React.createRef()myRef2 = React.createRef()showDate = () => {alert(this.myRef.current.value);}showDate2 = () => {alert(this.myRef2.current.value);}render() {return (<div><input ref={this.myRef} type="text" placeholder="點擊按鈕提示數(shù)據(jù)"></input><button ref={c => this.btn = c} onClick={this.showDate}>點擊我提示左側(cè)的數(shù)據(jù)</button><input ref={this.myRef2} onBlur={this.showDate2} type="text" placeholder="失去焦點提示數(shù)據(jù)"></input></div>)}}// 渲染domReactDOM.render(<Demo />, document.getElementById("test"));注意:盡量避免使用ref,如果事件本身的發(fā)起者和數(shù)據(jù)是一個可以通過enent.taget拿到
受控組件
<script type="text/babel">// 創(chuàng)建組件class Demo extends React.Component {handleSubmit = (event) => {event.preventDefault();// 阻止表單提交}saveFromDate = (dataType) => {return (event)=> {this.setState({[dataType]:event.target.value})}}render() {return (<form action="" onSubmit={this.handleSubmit}>用戶名:<input type="text" onChange={this.saveFromDate("username")} name="username" />密碼:<input type="password" onChange={this.saveFromDate("password")} name="password" /><button type="submit">登錄</button></form>)}}// 渲染組件ReactDOM.render(<Demo />, document.getElementById("test"));</script>非受控組件
<script type="text/babel">// 創(chuàng)建組件class Demo extends React.Component {username = React.createRef()password = React.createRef()handleSubmit = (event) => {event.preventDefault();// 阻止表單提交console.log(this.username.current.value+this.password.current.value);}render() {return (<form action="" onSubmit={this.handleSubmit}>用戶名:<input type="text" ref={this.username} name="username" />密碼:<input type="password" ref={this.password} name="password" /><button type="submit">登錄</button></form>)}}// 渲染組件ReactDOM.render(<Demo />, document.getElementById("test"));</script>生命周期
<script type="text/babel">// 創(chuàng)建組件class Lift extends React.Component {state = { opacity: 1 }death = () => {// 卸載組件ReactDOM.unmountComponentAtNode(document.getElementById("test"));}// 組件掛載完畢componentDidMount = () => {this.timer = setInterval(() => {let { opacity } = this.state;opacity -= 0.05;if (opacity <= 0) { opacity = 1; }this.setState({ opacity });}, 100);}// 組件將要卸載componentWillUnmount = () => {// 清除定時器clearInterval(this.timer);}// 初始化渲染,狀態(tài)更新之后render() {return (<div><h2 style={{ opacity: this.state.opacity }}>學不會怎么辦?</h2><button onClick={this.death}>不活了</button></div>)}}// 掛載到界面ReactDOM.render(<Lift />, document.getElementById("test"));</script>組件的生命周期(舊)
<script type="text/babel">class Demo extends React.Component {// 第一次調(diào)用 :構造函數(shù)constructor(props) {console.log("Count---constuctor");super(props)// 初始化狀態(tài)this.state = {count:0}}// 第二次調(diào)用 :將要掛載的鉤子componentWillMount = ()=>{console.log("Count---componentWillMount");}// 第三次調(diào)用 掛載完畢 : 掛載完畢的鉤子componentDidMount = ()=>{console.log("Count---componentDidMount");}/** 更新的路線*/// 組件更新狀態(tài)是否更新頁面 || 默認返回true || 返回false不更新頁面shouldComponentUpdate = ()=>{console.log("Count---shouldComponentUpdate");return true;}// 組件將要更新componentWillUpdate(){console.log("Count---ComponentWillUpdate");}// 組件更新完畢componentDidUpdate(){console.log("Count---componentDidUpdate");}// 卸載組件之前調(diào)用鉤子componentWillUnmount= ()=>{console.log("Count---componentWillUnmount")}/** 強制更新*/force = ()=>{this.forceUpdate();}/** end: 最終卸載組件*/// 加1按鈕的回調(diào)add = () => {this.setState({ count: this.state.count + 1 })}// 卸載組件death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById("test"))}// 狀態(tài)信息render() {console.log("Count---render");const { count } = this.state;return (<div><h2>當前求和為{count}</h2><button onClick={this.add}>點我加一</button><button onClick={this.death}>點擊我卸載組件</button><button onClick={this.force}>不更改狀態(tài),強制更新</button></div>)}}ReactDOM.render(<Demo />, document.getElementById("test"));</script>組件的生命周期全(舊)
<script type="text/babel">// 創(chuàng)建組件class Demo extends React.Component {// 第一次調(diào)用 :構造函數(shù)constructor(props) {console.log("Count---constuctor");super(props)// 初始化狀態(tài)this.state = {count:0}}// 第二次調(diào)用 :將要掛載的鉤子componentWillMount = ()=>{console.log("Count---componentWillMount");}// 第三次調(diào)用 掛載完畢 : 掛載完畢的鉤子componentDidMount = ()=>{console.log("Count---componentDidMount");}/** 更新的路線*/// 組件更新狀態(tài)是否更新頁面 || 默認返回true || 返回false不更新頁面shouldComponentUpdate = ()=>{console.log("Count---shouldComponentUpdate");return true;}// 組件將要更新componentWillUpdate(){console.log("Count---ComponentWillUpdate");}// 組件更新完畢componentDidUpdate(){console.log("Count---componentDidUpdate");}// 卸載組件之前調(diào)用鉤子componentWillUnmount= ()=>{console.log("Count---componentWillUnmount")}/** 強制更新*/force = ()=>{this.forceUpdate();}/** end: 最終卸載組件*/// 加1按鈕的回調(diào)add = () => {this.setState({ count: this.state.count + 1 })}// 卸載組件death = ()=>{ReactDOM.unmountComponentAtNode(document.getElementById("test"))}// 狀態(tài)信息render() { console.log("Count---render");const { count } = this.state;return (<div><h2>當前求和為{count}</h2><button onClick={this.add}>點我加一</button><button onClick={this.death}>點擊我卸載組件</button><button onClick={this.force}>不更改狀態(tài),強制更新</button></div>)}}// 定義父組件class A extends React.Component{// 初始化狀態(tài)state = {carName:"奔馳"}changCar = ()=>{let {carName} = this.state;this.setState({carName : "奧拓"});}render(){return(<div><div>我是A組件</div><button onClick={this.changCar}>換車</button><B carName={this.state.carName} /></div>)}}// 定義子組件class B extends React.Component{// 組件將要接收新的Props,默認接收props參數(shù)componentWillReceiveProps(props){console.log("B---componentWillReceiveProps",props)}shouldComponentUpdate(){console.log("B---shouldComponentUpdate")return true;}componentWillUpdate(){console.log("B---componentWillUpdate")}componentDidUpdate(){console.log("B---componentDidUpdate")}componentWillUnmount(){console.log("B---componentWillUnmount")}render(){return(<div>我是B組件,接收到的車是:{this.props.carName}</div>)}}ReactDOM.render(<A />, document.getElementById("test"));</script>getSnapshotBefroeUpdate
## <font color='red'>重點: react和vue中的key有什么作用</font>1. 虛擬DOM中的key的作用:<font color='orange'>1)**簡單的說**:key是虛擬DOM對象的標識符,在更新顯示時key起著極其重要的作用</font><font color='yellow'>2) **詳細的說**:當狀態(tài)中的數(shù)據(jù)發(fā)生變化的時候,react會根據(jù)**<font color='red'>[新數(shù)據(jù)]</font>**生成**<font color='red'>[新的虛擬DOM]</font>**,隨后React進行**<font color='red'>[新虛擬DOM]</font>**與**<font color='red'>[舊虛擬DOM]</font>**的diff比較,比較規(guī)則如下:</font>2. 舊虛擬DOM中找到了與新虛擬DOM想相同的key:1).<font color='cornflowerblue'>若虛擬DOM中的內(nèi)容</font><font color='green'>沒變</font>,<font color='purple'>直接使用</font>之前的<font color='orange'>真實DOM</font>2)<font color='cornflowerblue'>.若虛擬DOM中的內(nèi)容</font><font color='green'>變了</font>,<font color='purple'>則生成</font>新的<font color='yellow'>真實的DOM,最后替換掉頁面中之前的真實DOM</font>3. 舊虛擬DOM中未找到與新虛擬DOM相同的key根據(jù)數(shù)據(jù)創(chuàng)建新的真實DOM,隨后渲染到頁面# R eact 腳手架## 相關命令npm i create-react-app -g1. yarn start -----------------------------------開啟2. yarn build -----------------------------------最終進行一次打包3. yarn test ------------------------------------幾乎不用,4. yarn eject ----------------------------------react 怕你碰壞webpack的配置文件,所以都隱藏了,一旦暴露出來,就隱藏不回去了## nanoid添加方式 yarn add nanoid```react import {nanoid} from "nanoid" nanoid(); // 每次生成一個唯一值使用axios請求
getStudentData = () => {axios({method: 'get',url: 'http://localhost:3000/students'}).then(function (value) { console.log(value.data); }, function (reason) { console.log(reason); })}如果請求的不是3000端口的服務器,配置中間服務器
// 在package.json中 加入一條 , 端口號5000根據(jù)服務器的端口改 "proxy": "http://localhost:5000"配置多個代理服務器
// 在pulic中新建setupProxy.js const proxy = require('http-proxy-middleware')module.exports = function (app) {app.use(proxy('/api1', { // 遇見api1前綴的請求,就會觸發(fā)該代理配置target: 'http://localhost:5000', // 轉(zhuǎn)發(fā)的地址changeOrigin: true, // 控制服務器收到的請求頭中Host字段的值 ,年輕人,偷,騙,我七十二歲的老服務器pathRewrite: { '^/api1': '' } // 重寫請求路徑}),proxy('/api2', {target: 'http://localhost:5001',changeOrigin: true,pathRewrite: { '^/api2': '' }})) }消息訂閱與發(fā)布機制
使用
npm install pubsub-js --save
import PubSub from ‘pubsub-js’// 引入
const PubSub = require(“pubsub-js”); // comment.js 引入
消息發(fā)布
PubSub.publish('delete',data) // 發(fā)布消息消息訂閱
var token = PubSub.subscribe('delete',function(_,data){});// 訂閱取消訂閱
PubSub.unsubscribe(token)React 路由
1. 什么是路由
一個路由就是一個映射關系(key:value)
key 是路徑,value可能是function 或 component
路由的原理
根據(jù)瀏覽器的history
因為瀏覽器的結構是一個棧的結構
BrowserRouter
<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><BrowserRouter> {/* 包在最外層 */}<div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 原生HTML中,使用a標簽來跳轉(zhuǎn)到不同的頁面 */}{/* <a className="list-group-item active" href="./about.html">About</a><a className="list-group-item" href="./home.html">Home</a> */}{/* 在React中靠路由連接實現(xiàn)切換組件 */}<Link className="list-group-item" to="/about">About</Link><Link className="list-group-item" to="/home">Home</Link></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注冊路由 */}<Route path="/about" component={About} /><Route path="/home" component={Home} /></div></div></div></div></BrowserRouter></div>簡化
import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import App from './App'ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))切換 hash route
import React from 'react' import ReactDOM from 'react-dom' import { HashRouter } from 'react-router-dom' import App from './App'ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'))路由組件傳遞數(shù)據(jù)
路由組件與一般組件
寫法不同
一般組件:
路由組件:
存放位置不同
一般組件: components
路由組件: pages
接收的props 不同
一般組件: 寫組件標簽時傳遞了什么,就能收到什么
路由組件:接收到三個固定的屬性
NavLink
添加這個自動給鏈接加一個類action
設置樣式 activeClassName
<NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink>NavLink 的封裝
import React, { Component } from 'react' import { NavLink } from 'react-router-dom'export default class MyNavLink extends Component {render() {return (<NavLink activeClassName="demo" className="list-group-item" {...this.props} ></NavLink>)} }{/* children 這個是在標簽內(nèi)的文字 */}<MyNavLink to="/home" children="dddd" title="dddd"></MyNavLink>注冊的路由特別多的解決辦法
<Switch><Route path="/about" component={About} /><Route path="/home" component={Home} /><Route path="/home" component={About} /></Switch>一個以上包裹Switch只匹配一次,不會繼續(xù)向下匹配 import { NavLink, Route,Switch } from 'react-router-dom'多級路由樣式丟失的問題
查找丟失的css,把.去掉
或者修改路由模式為hashRouter
路由的模糊匹配和精準匹配
/home/a/b
home a b
/home
使用精準配置 需要 慎用 沒有影響不要亂開 有可能導致無法匹配二級路由
redirect
{/* 注冊路由 */}<Switch><Route path="/about" component={About} /><Route path="/home" component={Home} /><Route path="/home" component={About} />{/* 兜底的 */}<Redirect to="/about" /></Switch>嵌套路由的使用
// 嵌套路由 在一個路由組件中又有一個路由組件 注意匹配模式 例如: /home/news 先匹配home,返回home,在匹配news,返回news,如果使用精準匹配就會出錯路由組件傳遞params參數(shù)
render() {const { messageArr } = this.state;return (<div><ul>{messageArr.map((msgObj) => {return (/* 向路由組件傳遞params參數(shù) */<li key={msgObj.id}><Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> </li>)})}</ul>{/* 聲明接收 */}<Route path="/home/message/detail/:id/:title" component={Detail} /></div>)} // 拿const {id,title} = this.props.match.params;路由組件傳遞search參數(shù)
/* 向路由組件傳遞search參數(shù) */ <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}></Link>{/* search參數(shù)無需聲明接收 */} <Route path="/home/message/detail" component={Detail} /> // 導入querystring import qs from 'querystring' // 將json轉(zhuǎn)dd=dd&cc=cc qs.stringfiy(obj) //反轉(zhuǎn) qs.parse(str) // 接收const {search} = this.props.locationconst {id,title} = qs.parse(search.slice(1))路由組件傳遞state參數(shù)
{/* 向路由傳遞state參數(shù) */} <Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}></Link>{/* state參數(shù)無需聲明接收 */} <Route path="/home/message/detail" component={Detail} />// 接收state參數(shù) const {id,title} = this.props.location.state // 注意:如果緩存和歷史記錄清除之后就會取不到值,因為state是保存在瀏覽器的history里 // 防止保錯const {id,title} = this.props.location.state || {};const findResult = DetailData.find((detailObj) => {return detailObj.id === id}) || {};push 和 replace 痕跡
replace 沒有歷史記錄,只是替換如果點擊圖片實現(xiàn)跳轉(zhuǎn)
編程式路由導航
push 和 replace
<button onClick={()=>{this.pushShow(msgObj.id,msgObj.title)}}>push查看</button> <button onClick={()=>{this.replaceShow(msgObj.id,msgObj.title)}}>replace查看</button> replaceShow = (id, title) => {// 使用params // this.props.history.replace(`/home/message/detail/${id}/${title}`);// 使用search// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`);// 使用statethis.props.history.replace(`/home/message/detail`, { id, title });}pushShow = (id, title) => {// 使用params // this.props.history.push(`/home/message/detail/${id}/${title}`);// 使用search// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`);// 使用statethis.props.history.push(`/home/message/detail`, { id, title });}前進后退
back = () => {this.props.history.goBack();}forward = () => {console.log(this.props);this.props.history.goForward();}// go// 后退一步this.props.history.go(-1);// 后退兩步this.props.history.go(-2);// 前進一步this.props.history.go(1);// 前進兩步this.props.history.go(2);自動跳轉(zhuǎn)
componentDidMount() {setTimeout(() =>{ this.props.history.push('/home/message') },2000);在一般組件中使用路由組件api
import {withRouter} from 'react-router-dom' export default withRouter(組件)BrowserRouter 和 HashRouter 的區(qū)別
antd
安裝
yarn add antd修改默認樣式
redux
能不用就不用,復雜的組件嵌套關系可以使用
yarn add redux /* 該文件專門用于暴露一個store對象,整個應用只有一個store對象 */ /src/redux/store.js// 引入createStore, 專門用于創(chuàng)建redux中最為核心的store對象 import {createStore} from 'redux' // 引入為Count組件服務的reducer import countReducer from './count_reducer'export default createStore(countReducer); /* 1. 該文件是用于創(chuàng)建一個為Count組件服務的reducer,reducer的本質(zhì)就是一個函數(shù)2. reducer函數(shù)會接到兩個函數(shù),分別為:之前的狀態(tài)(preState),動作對象(action) */ /src/redux/count_reducersconst initState = 0; export default function countReducer(previousState = initState, action) {const { type, data } = action;// 根據(jù)type決定如何加工數(shù)據(jù)switch (type) {case 'increment':previousState + data; // 如果是加case 'decrement':previousState - data; // 如果是減 default:return previousState;} }注意:每次更改數(shù)據(jù)不會引起重繪,加入一個store檢測是否更新,如果更新就重繪
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from './redux/store'ReactDOM.render(// 可以檢查React組件有沒有錯誤<React.StrictMode><App /></React.StrictMode>,document.getElementById('root') );// 檢查有沒有改變,如果有改變就重繪重排 store.subscribe(() => {ReactDOM.render(// 可以檢查React組件有沒有錯誤<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')); });理解:
reducer本質(zhì)是一個函數(shù),接收previousState,action
reducer初始化,加工
reducer被第一次調(diào)用時,是store自動完成的
? 傳遞的previousState是undefined
? 傳遞的action:{type:@@REDUX/INIT_a.2.b.3}
在index.js中監(jiān)測store中狀態(tài)的改變,一旦發(fā)送改變重新渲染
備注:數(shù)據(jù)改變不刷新頁面,需要自己寫數(shù)據(jù)改變刷新頁面
react 執(zhí)行異步任務
不是必須要用的,看應用場景
yarn add redux-thunk需要使用中間件來轉(zhuǎn)換
/src/redux/store+ import {createStore,applyMiddleware} from 'redux' import Count from './count_reducers' // 引入redux-thunk,用于支持thunk import thunk from 'redux-thunk'+ export default createStore(Count,applyMiddleware(thunk)); // 異步是一個函數(shù) export const yibujiazai = (data, time) => {return () => { setTimeout(() => { store.dispatch(add(data)) }, time) } }react-redux
yarn add react-redux定義容器組件
/src/containers/Count/index.jsx import CountUI from "../../components/Count" // 引入connect 用于連接UI組件與redux import {connect} from "react-redux"// 連接ui組件 export default connect()(CountUI) // 通過父組件進行傳遞 import React, { Component } from 'react' import Count from './containers/Count' // 引入store import store from "./redux/store"export default class App extends Component {render() {return (<div><Count store={store}></Count></div>)} }通過connect連接ui組件
前面的括號是兩個函數(shù),后面是連接的ui組件名稱
前面的函數(shù)傳遞的是狀態(tài),后面的函數(shù)傳遞的是操作狀態(tài)的方法
connect (a,b)(UI) function a(state) {// state 是初始狀態(tài),store.getState()return { n: {count:state}} }function b(dispatch) {// dispatch 是分發(fā)狀態(tài)return {jia: number => dispatch(add(number)),jian:number=>dispatch(jian(number)),yubu:(number,time)=>dispatch(yibujiazai(number,time))} }// 精簡模式 , dispatch自動分發(fā) export default connect(state => ({ n: { count: state } }), ({jia: add,jian: jian,yubu: yibujiazai } ) )(CountUI)注意:如果使用了react-redux,不用監(jiān)測action是否改變,刪除以下,connect()()自動render,優(yōu)化點一
// 監(jiān)測redux中的狀態(tài)改變,若redux中的狀態(tài)發(fā)送了改變,那么重新渲染組件 store.subscribe(()=>{ReactDOM.render(<App />, document.getElementById("root")); })provider
如果有以下這么多的組件,簡化傳遞store
{/* 給容器組件傳遞store */} ? <Count store={store}></Count>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>? <Demo1 store={store}></Demo1>解決:
/src/index.js import App from './App' import React from 'react' import ReactDOM from 'react-dom' + import store from './redux/store' + import { Provider } from 'react-redux' ReactDOM.render(+ <Provider store={store}><App />+ </Provider>, document.getElementById("root"));優(yōu)化containers 和 UI組件,將倆個文件合并為一個
/src/constainers/Countimport { connect } from "react-redux" import { add, jian, yibujiazai } from "../../redux/count_action" import React, { Component } from 'react'class Count extends Component {increment = () => {console.log(this.props);this.props.jia(1);}jian = () => {this.props.jian(1);}jijia = () => { }yibu = () => {this.props.yubu(1, 500);}render() {return (<div><div>{this.props.pre.count}</div><button onClick={this.increment}>加一</button><button onClick={this.jian}>減一</button><button onClick={this.jijia}>奇數(shù)加一</button><button onClick={this.yibu}>異步加載</button></div>)} }export default connect(state => ({ pre: { count: state } }), ({jia: add,jian: jian,yubu: yibujiazai } ) )(Count)優(yōu)化總結
數(shù)據(jù)共享
/redux/actions/count.js
/redux/reducers/count.js
store管理倆個組件
import { createStore, applyMiddleware, combineReducers } from 'redux' import Count_reducer from './reducers/count' import Person_reducer from './reducers/person' import thunk from 'redux-thunk'// 匯總所有的reducer變成一個reducer const allReducer = combineReducers({he: Count_reducer,rens: Person_reducer });export default createStore(allReducer, applyMiddleware(thunk))state變成總對象
export default connect(
state => ({yiduiren:state.rens})
)(Person);
改變連接的值
export default connect(state => ({ yiduiren: state.rens, data: state.he }),{jiaYiRen: AddPerson,}state 是redux全局保存的// 獲取值this.props.yiduirenthis.props.data注意:多個組件reducers中type的值不能一樣,不然會執(zhí)行兩次,
注意:對數(shù)組進行操作時,使用[…],使用數(shù)組unshift并不會render,因為redux對數(shù)組進行的是淺比較,比較的是地址值
redux調(diào)試工具
yarn add redux-devtools-extension // 在store中 // 引入redux-devtools-extension import { composeWithDevTools } from 'redux-devtools-extension'// 匯總所有的reducer變成一個reducer const allReducer = combineReducers({he: Count_reducer,rens: Person_reducer });export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))項目打包
npm i serve -g
yarn global add serve
serve build
總結
以上是生活随笔為你收集整理的React从入门到入土的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第八次作业—— 缺陷管理
- 下一篇： 2021 1024