（1）業務代碼里面的異步請求需要 try catch

ajax 請求，使用 try catch，錯誤提示后端返回,并且做一些失敗后的狀態操作例如進入列表頁，我們需要一個 loading 狀態，然后去請求數據,可是失敗之后，也需要把 loading 狀態去掉,把 loading 隱藏的代碼就寫在 finally 里面。

getStudentList = async () => {try {this.setState({loading: true,isEmpty: false});await getStudentList({});this.setState({loading: false,isEmpty: true});} catch (e) {// TODOconsole.log(e)} finally {// 失敗之后的一些兜底操作this.setState({loading: false,isEmpty: true});} };

(2) for-in 中一定要有 hasOwnProperty 的判斷（即禁止直接讀取原型對象的屬性）

//bad const arr = []; const key = '';for (key in obj) {arr.push(obj[key]); }//good const arr = []; const key = '';for (key in obj) {if (obj.hasOwnProperty(key)) {arr.push(obj[key]);} }

(3)第三方庫函數的使用

用 try catch 包裹，防止第三方庫的出現錯誤，導致整個程序崩潰/** Echart 用于代繪制圖表，但當其自身發生錯誤時，可能影響到業務代碼的執行*/ // bad const iniDom = document.getElementById('init-container'); const echartObj = echarts.init(iniDom); this.setState({echartObj},() => {const { echartObj } = this.state;// 更新圖表echartObj.setOption(CHART_CONFIG, true);} );// good try {const iniDom = document.getElementById('init-container');const echartObj = echarts.init(iniDom);this.setState({echartObj},() => {const { echartObj } = this.state;// 更新圖表echartObj.setOption(CHART_CONFIG, true);}); } catch (error) {// TODO }

(4)防止 xss 攻擊

input，textarea 等標簽，不要直接把 html 文本直接渲染在頁面上,使用 xssb 等過濾之后再輸出到標簽上;

import { html2text } from 'xss'; render(){<divdangerouslySetInnerHTML={{__html: html2text(htmlContent)}} /> }

(5)在組件中獲取真實 dom

使用 16 版本后的 createRef()函數

class MyComponent extends React.Component<iProps, iState> {constructor(props) {super(props);this.inputRef = React.createRef();}render() {return <input type="text" ref={this.inputRef} />;}componentDidMount() {this.inputRef.current.focus();} }

(6)代碼細粒度的思考

總結四句話。我們在寫組件或者函數的的時候，

• 工具函數和業務邏輯抽離;
• 表單校驗和業務抽離;
• 事件函數和業務抽離;
• ajax和業務抽離;

例如有些頁面是通過location.href跳轉的，我們有些業務邏輯等都是放到didmountMount,但是后期改需求，可能要用react-router進行跳轉，可能要改的邏輯就會很多了，所以函數抽離出來，需求更新就少改一點代碼。
如果還不確定如何劃分函數的細粒度，我有個建議。使用過兩次以上的代碼，要抽離組件或者函數，兩次的可以不用

(7)a標簽安全問題

使用a標簽打開一個新窗口過程中的安全問題。新頁面中可以使用window.opener來控制原始頁面。如果新老頁面同域，那么在新頁面中可以任意操作原始頁面。如果是不同域，新頁面中依然可以通過window.opener.location，訪問到原始頁面的location對象
在帶有target="_blank"的a標簽中，加上rel="noopener"屬性。如果使用window.open的方式打開頁面，將opener對象置為空。

var newWindow = window.open(); newWindow.opener = null;

總結

以上是生活随笔為你收集整理的react 常用规范和经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。