資訊專(zhuān)欄INFORMATION COLUMN
摘要：在子組件構(gòu)造函數(shù)中訂閱變化設(shè)置回調(diào)函數(shù)賦值給實(shí)視圖更新匿名空密碼中更新。利用在中某個(gè)到數(shù)據(jù)攜帶在對(duì)象的其他屬性里，把數(shù)據(jù)更新從視圖傳遞到姓名密碼登錄一定要在目錄中導(dǎo)入文件這樣就可以用原生實(shí)現(xiàn)組件之間數(shù)據(jù)共享。
redux數(shù)據(jù)管理的基本原理redux是一個(gè)提供組件之間數(shù)據(jù)共享，管理處理的模塊，在react組件中使用十分廣泛，如何在react組件中實(shí)現(xiàn)數(shù)據(jù)共享管理？
1.利用store存儲(chǔ)數(shù)據(jù)信息，利用store.getState()得到當(dāng)前的狀態(tài)值
導(dǎo)入redux中的createStore方法,創(chuàng)建一個(gè)store
import {createStore} from "redux"
const store = createStore()
2.state是store某一個(gè)時(shí)刻的數(shù)據(jù)值，store里面的數(shù)據(jù)變更會(huì)觸發(fā)store.subscribe中回調(diào)函數(shù)，在里面設(shè)置setState引發(fā)view更新
3.定義action類(lèi)型type和攜帶的數(shù)據(jù)，action是一個(gè)對(duì)象里面必須有type屬性,它標(biāo)識(shí)了action類(lèi)型名稱，也可以用函數(shù)生成action
const action= {
type: "CHANGE",
data:"data"
}
//another way to create a action with function
function actionsCreator(obj) {
return {
type: "CHANGE",
name: obj.name,
pass: obj.pass
}
}
4.view中觸發(fā)store改變。store.dispatch(action)給dispatch方法傳入action來(lái)更新store中數(shù)據(jù)（dispatch是觸發(fā)更新，action是定義更新類(lèi)型，action類(lèi)似于定義domEvent中的事件類(lèi)型click 、onload、onchange······有很多類(lèi)型,但是觸發(fā)還需要調(diào)用store.dispatch）
5.在createStore中傳入一個(gè)函數(shù)作為參數(shù)（必須），這個(gè)函數(shù)是reducer，定義dispatch某個(gè)action后state針對(duì)這個(gè)action如何更新.
reducer(initialState,action)。由于它的功能是根據(jù)初始state和action類(lèi)型生成更新后的state,它接收初始initialState,action作為參數(shù)
功能
兩個(gè)組件一個(gè)UShow 一個(gè)UInput
兩者之間共享redux >store里面的數(shù)據(jù)，一個(gè)用來(lái)展示，一個(gè)用來(lái)改變store里面的數(shù)據(jù)。
方法步驟
1.定義store
//redux.js
import {createStore} from "redux"
const store = createStore(reducer)
2.定義某個(gè)action被dispatch后的state變化規(guī)則(這個(gè)代碼必須在createStore定義store前面)
下面代碼含義為如果acttion類(lèi)型是CHANGE那么就返回action對(duì)象中的name和pass,借此更新state
const reducer = (initialState = {
name: "mayun",
pass: "asd"
}, actions) => {
switch (actions.type) {
case "CHANGE":
return {
name: actions.name,
pass: actions.pass
}
default:
return initialState
}
}
3.定義action對(duì)象，即什么類(lèi)型的action會(huì)被分發(fā)，也可以在其中攜帶用戶自定義的數(shù)據(jù)（我們定義的是pass和name）。這里我們用一個(gè)函數(shù)來(lái)生成這個(gè)action對(duì)象，本質(zhì)和直接定義action對(duì)象沒(méi)啥區(qū)別
function actionsCreator(obj) {
return {
type: "CHANGE",
name: obj.name,
pass: obj.pass
}
}
export { actionsCreator ,const store}
4.用store.subscribe()觸發(fā)view更新(在子組件UShow中實(shí)現(xiàn))。
定義一個(gè)MyWrap組件作為容器，定義UInput UShow作為它的子組件
const MyWrap=()=>() ReactDOM.render(,document.getElementById("example"))
獲取store數(shù)據(jù)。在子組件UShow 構(gòu)造函數(shù)constructor中訂閱state變化,設(shè)置回調(diào)函數(shù)賦值給this.state實(shí)視圖更新
class Ushow extends React.Component{
constructor(...args){
super(...args)
this.state={
name:"匿名",
pass:"空密碼"
}
store.subscribe(()=>{
this.setState({
name:store.getState().name,
pass:store.getState().pass
})
})
}
render(){
return (
name:{this.state.name}
pass:{this.state.pass}
)
}
}
view UInput中更新store。利用dispatch在UInput 中dispatch 某個(gè)action到store（數(shù)據(jù)攜帶在action對(duì)象的其他屬性里），把數(shù)據(jù)更新從視圖view傳遞到store
class UInput extends React.Component{
sure(){
store.dispatch(actionsCreator({name:this.refs.name.value,pass:this.refs.pass.value}))
}
render(){
return(
姓名:
密碼:
)
}
}
一定要在目錄中導(dǎo)入redux文件import {store ,actionsCreator} from "../util/redux.js"
這樣就可以用原生redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82976.html
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎校琑eact Nativ...
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎?，React Nativ...
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎?，React Nativ...
摘要：函數(shù)屬性或者說(shuō)事件在組件之間通信過(guò)程中是必不可少的，但是切莫讓它影響了大家對(duì)單向數(shù)據(jù)流這一概念的理解。這應(yīng)該屬于一種的使用方式，而且這樣做有悖單向數(shù)據(jù)流原則。 上一篇文章 玩轉(zhuǎn) React（六）- 處理事件 介紹了在 React 中如何處理用戶事件，以及 React 事件機(jī)制與原生 DOM 事件的差異和注意的問(wèn)題，同時(shí)也介紹了事件處理函數(shù)中 this 的指向問(wèn)題以及處理的幾種方式及其優(yōu)...
閱讀 2432·2021-11-24 09:39
閱讀 3123·2021-10-15 09:39
閱讀 3180·2021-07-26 23:38
閱讀 2366·2019-08-30 11:14
閱讀 3468·2019-08-29 16:39
閱讀 1766·2019-08-29 15:23
閱讀 867·2019-08-29 13:01
閱讀 2731·2019-08-29 12:29
