摘要:又一篇來自日常開發的匯總各位客官請對號入席,店小二逐一上菜。解決方案有很多種,例如把字符串數組等重組對象數組,每個元素設置一個唯一等。另外有個方式推薦使用生成唯一的數組,和數據數組一起使用,省去提交數據時再重組數組。
又一篇來自日常開發的匯總:各位客官請對號入席,店小二逐一上菜。
react數組循環,基本都會設置一個唯一的key,表格的對象數組循環一般沒什么問題,數據基本都會有一個id。那有種情況就比較坑了,出現在表單形式的頁面結構中,對某個數組進行增刪改操作,一般對于非對象數組而言,沒有id,可能很多人會偷懶,循環的時候,直接設置數組的下標index作為key,當出現增刪改時候,就會出現數據對不上或者重新渲染組件的問題等。解決方案有很多種,例如把字符串數組等重組對象數組,每個元素設置一個唯一id等。另外有個方式:推薦使用shortid生成唯一key的數組,和數據數組一起使用,省去提交數據時再重組數組。
import React from "react"; import shortid from "shortid"; class Demo extends React.Component { constructor(props) { super(props); this.state = { data: ["a", "b", "c"] } this.dataKeys = this.state.data.map(v => shortid.generate()); } deleteOne = index => { // 刪除操作 const { data } = this.state; this.setState({ data: data.filter((v, i) => i !== index) }); this.dataKyes.splice(index, 1); } render() { return (
通過判斷值是否存在來控制元素是否顯示,一般三目運算可以達到此效果,最簡單的還是用短路的寫法:
// 不錯 const flag = "something"; flag && // 很好 // 注意一般可能上面寫法多一些,但當flag為0 的時頁面上會顯示0,用!!將其轉為boolean避免坑, // 代碼也更規范 const flag = "something"; !!flag &&
使用組件,傳遞props:
const { data, type, something } = this.state;
也許另外一種傳遞方式更簡潔:
const { data, type, something } = this.state;
組件的props有時候會定義很多,但是調用組件傳遞props的時候又想一個個傳,不想一次性傳遞一個option對象,通過擴展運算符和解構賦值可以簡化此操作:
const Demo = ({ prop1, prop2, prop3, ...restProps }) => (xxxx { restProps.something }) // 父組件使用Demo
一般改變state值的一種方式:
const { data } = this.state; this.setState({ data: {...data, key: 1 } });
另外一種可以通過callback的方式改變state的值
this.setState(({ data }) => ({ data: {...data, key: 1 } }));
還可以:
this.setState((state, props) => { return { counter: state.counter + props.step }; });
React 性能優化有很多種方式,那常見的一種就是在生命周期函數shouldComponentUpdate里面判斷某些值或屬性來控制組件是否重新再次渲染。
判斷一般的字符串,數字或者基礎的對象,數組都還是比較好處理,那嵌套的對象或者數組就比較麻煩了,對于這種,可以轉成字符串處理,但屬性值的位置不同時,那就無效了。
推薦使用lodash(或者其他的類似庫)的isEqual對嵌套數組或對象進行判斷(相比其他方式更簡單些)
shouldComponentUpdate(nextProps, nextState) { if (_.isEqual(nextState.columns, this.state.columns)) return false; return true; }
創建彈層的三種方式:
普通組件通過state和樣式控制,在當前組件中顯示彈層-每次引入組件并且render里面控制顯示,掛載節點在某組件里面
// 彈層 const Dialog = () =>彈層// 某組件 render() { return ( this.state.showDialog && ) }
2.通過Portals創建通道,在根節點外部掛載組件-但還是需要每次引入并且在render里面調用
// 彈層 class Dialog extends React.Component { constructor(props) { super(props); this.el = document.createElement("div"); } componentDidMount() { modalRoot.appendChild(this.el); } componentWillUnmount() { modalRoot.removeChild(this.el); } render() { return ReactDOM.createPortal( this.props.children ||xxxx, this.el, ); } } // 某組件 render() { return ( this.state.showDialog && ) }
3.推薦使用ReactDom.render創建彈層-掛載根節點外層,使用也更方便
// demo let dialog; class Dialog { show(children) { // 顯示 this.div = document.createElement("div"); document.body.appendChild(this.div); ReactDom.render(children ||xxxx, this.div); } destroy() { // 銷毀 ReactDom.unmountComponentAtNode(this.div); this.div.parentNode.removeChild(this.div); } } export default { show: function(children) { dialog = new Dialog(); dialog.show(children); }, hide: xxxxx }; // 某組件 import Dialog from "xxx"; alert = () => { Dialog.show(xxxx); } render() { return ( ) }
render props是現在很流行的一種渲染方式,通過回調函數,渲染子組件,參數可為父組件的任意屬性值(官網也有相應的介紹)新版的contextApi也采用了這個模式。
很多種場景使用此方式的做法:
// 權限控制組件,只需要封裝一次connect, // 通過render props向子組件傳遞權限 class AuthWidget extends Component { render() { return this.props.children(this.props.auth); } } const mapStateToProps = state => { const { auth } = state; return { auth: state.auth }; }; export default connect(mapStateToProps)(AuthWidget); // 其他組件使用auth.edit && 編輯} /> // 使用antd的form時 const Test = ({ form, children }) => { return children(form); }; const FormTest = Form.create()(Test); class Demo extends Component { render() { return ( xxxxx) } }{ form => { this.form = form; return ( {getFieldDecorator("field", xxx)( )} ) }}
子組件改變父組件的state方式有很多種,可以在父組件設置一個通用函數,類似:setParentState,通過子組件回調處理時,就可以更方便的統一處理:
// 父組件 state = { data: {} } setParentState = obj => { this.setState(obj); } // 子組件 onClick = () => { this.props.setParentState({ data: xxx }); }
永遠不要直接設置state的值:this.state.data = { a: 1 }。這個會導致幾個問題:
1:組件不會重新渲染 2:shouldComponentUpdate(nextProps, nextState) 函數里面 this.state的值是已經改變了,和nextState的值相同。
舉個栗子:
// wrong const { data } = this.state; data.a = 1; // 等價于this.state.data.a = 1; this.setState({ data }); // shouldComponentUpdate里面觀察到 this.state 和nextState的值是相同的 // 此時函數里面性能相關的優化是無效的 // correct 需要用到當前state值的寫法 this.setState(state => ({ data: {...state.data, a: 1} }))
各位客官,菜已上齊,請慢用react相關討論,請加Q群:743490497
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97654.html
本文主要介紹一些JS中用到的小技巧,可以在日常Coding中提升幸福度,將不定期更新~ 1. 類型強制轉換 1.1 string強制轉換為數字 可以用*1來轉化為數字(實際上是調用.valueOf方法)然后使用Number.isNaN來判斷是否為NaN,或者使用 a !== a 來判斷是否為NaN,因為 NaN !== NaN 32 * 1 // 32 ds * 1 ...
摘要:技術前端布局推進劑間距規范化利用變量實現令人震驚的懸浮效果很棒,但有些情況不適用布局說可能是最全的圖片版學習網格布局使用的九大誤區圖解布局布局揭秘和中新增功能探索版本迭代論基礎談展望對比探究繪圖中撤銷功能的實現方式即將更改的生命周期幾道高 技術 CSS 前端布局推進劑 - 間距規范化 利用CSS變量實現令人震驚的懸浮效果 Flexbox 很棒,但有些情況不適用 CSS布局說——可能是最...
摘要:作者陳大魚頭魚頭總結一些能夠提高開發效率的技巧,這些技巧很實用,覺得挺好,想推薦給大家,所以有了這篇文章。如果此時正在看文章的你也有類似的技巧心得,不妨在下方留言來分享給大家。 作者:陳大魚頭 github: KRISACHAN 魚頭總結一些能夠提高開發效率的JS技巧,這些技巧很實用,覺得挺好,想推薦給大家,所以有了這篇文章。 生成隨機UID const genUid = () ...
摘要:使用歸類重復樣式和重復變量一樣,重復的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機號碼賬號密碼效果如下相關文章輸出計劃最近總有朋友問我相關的問題,因此接下來我會輸出篇相關的文章,希望對大家有一定的幫助。前言 在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優雅的使用技巧。這些技巧小生經常使用,覺得挺高效實用,所以也就有了這篇文章。 9 個 CSS 技巧 特此聲明,這里說的...
閱讀 3005·2021-10-12 10:12
閱讀 3052·2021-09-22 16:04
閱讀 3287·2019-08-30 15:54
閱讀 2602·2019-08-29 16:59
閱讀 2902·2019-08-29 16:08
閱讀 868·2019-08-29 11:20
閱讀 3492·2019-08-28 18:08
閱讀 648·2019-08-26 13:43