首先，需要對靜態方法做一個理解。static靜態方法，在es5中怎么實現呢？網易云課堂 微信授權掃碼點餐-新特性React16
function Person() {}
Person.getCount = function () {}
以上就是static靜態方法的原理。由于“this”只能獲取屬性是根據原型鏈，而靜態方法不在原型鏈上，所以，在組件實例內無通過this調用static方法，static方法也無法根據"this"調用實例的其他方法。
就防止在getDerivedStateFromProps 對組件實例的錯誤操作。
再次，getDerivedStateFromProps用來做什么用呢？
當組件實例化、接收到新的props時，會調用該方法。方法返回一個對象，這個對象會被更新到組件的state上。如果返回空，那么不對state做更新。 // 以下代碼實現，更新name屬性到state上； static getDerivedStateFromProps (nextProps, prevState) {return {name: nextProps.name}; }// 上面的代碼在以前版本中 // 你可能會用以下這樣做，雖然這樣做看起來也沒問題，用上面的方法更加安全，不會對this做誤操作 componentWillReceiveProps (nextProps) {if (this.state.name !== nextProps.name) {this.setState({name: nextProps.name});} }

?

b.如何理解getSnapshotBeforeUpdate(prevProps, prevState)？

首先，從字面來理解“snapshot”是快照的意思。在dom更前之前調用。返回的值將被傳給componentDidUpdate(prevProps, prevState, snaphot)。
這個會比較少用到，但對于處理比如數據更新后的滾動條的差異滾動，對用戶體驗，很有幫助。

?

c.如何理解componentDidCatch(error, info)？

以往，當組件發生錯誤（可以用throw new Error模擬）時，會導致整個react程序死掉，這對于程序的穩定性來說非常不好。
componentDidCatch可以捕獲子組件中任何一個錯誤，捕獲到錯誤后可以對錯誤進行處理。
如果發生錯誤的組件的父組件沒有設置componentDidCatch錯誤捕獲，將繼續遞歸父組件的父組件中的componentDidCatch，找到則停止。 // 簡單的錯誤捕獲 componentDidCatch (error, info) {this.setState({error: true}); }render () {if (this.state.error) {return <div>子組件發生異常了</div>}// 其他代碼 }

第二：優化了哪些語法

1: ref優化

ref有很多作用，通過ref父組件可以調用子組件內的方法，配合ReactDOM.findDOMNode(ref) 可以獲取到組件對應的dom。ref與key一樣無法通過this.props.ref獲取；

以前版本的react，給子組件添加ref=“inputName”，就可以通過this.refs['inputName']獲取子組件實例。然后可以進行一些操作。

?

React16中有兩種創建Ref的方法：

constructor () {this.inputNameRef = React.createRef();this.switchRef = React.createRef(); }render () {// 通過this.inputNameRef.current 可以獲取到input實例return (<div><input ref={this.inputNameRef} /><Switch ref={this.switchRef} /></div>) }

?

render () {// 通過回調ref的方式實現// 通過this.inputNameRef 可以獲取到input實例// this.switchRef可以獲取Switch的實例return (<div><input ref={(ref) => this.inputNameRef = ref} /><Switch ref={(ref) => this.switchRef = ref} /></div>) }

那，既然ref和key可以一樣不能用this.props獲取，有沒有辦法傳給子組件呢？這樣就可以實現在組件中調用子子組件（比如子組件中的input）了。

答案是肯定的。

也有兩種方法：

render () {// 假設this.switchRef已經在constructor里創建了，那么可以通過其他屬性傳遞。// 在子組件中可以通過this.props.forRef。// 注：forRef 為隨便名只要不是react內置的名稱就行return (<Switch forRef={this.switchRef} />); }

?

// 通過React.forwardRef 傳遞 export default React.forwardRef((props, ref) => {return (<div><OtherChild /><Switch ref={ref} /><OtherChild2 /></div>) });

總結

以上是生活随笔為你收集整理的微信授权扫码点餐-新特性React16的全部內容，希望文章能夠幫你解決所遇到的問題。

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