React 16.3(.0-alpha)新特性
React 16.3-alpha已经发布。这次发布都有哪些新特性呢,我们来一起看看。 新的Context APIContext API总是很让人迷惑。这个API是官方的,但是官方又不希望开发者们使用这个API,说是这个API会在以后发生改变。现在就是那个改变的时刻。新的API已经被merge了。而且它看起来更加的“用户友好”了。尤其是你不得不使用redux、mobx的时候,可以选择新的Context API实现更加简单的状态管理。 新的API用起来非常的简单: import {createContext} from 'react'; const ThemeContext = createContext({ background: 'yellow',color: 'white' }); 调用 那个 class Application extends React.Component { render() { <ThemeContext.Provider value={{background: 'black',color: 'white'}}> <Header /> <Main /> <Footer /> </ThemeContext.Provider> } } 上例展示了如何传递“theme” context的。当然这些值可以是动态的(比如,基于 下一步就是使用 const Header = () => { <ThemeContext.Consumer> {(context) => { return ( <div style={{background: context.background,color: context.color}}> Welcome! </div> ); }} </ThemeContext.Consumer> } 如果在render 注意:
Context传递的数据和 新的声明周期方法参考这个RFC。新的声明周期方法会被引入,而旧的会被废弃。 这一改变主要是为了强制推行最佳实践。你可以看看这篇文章来了解一下为什么这些生命周期方法会变得很诡异。这些最佳模式在React 16的异步绘制模式(Async Mode)下显得非常重要。 要被废弃的方法:
不过这些并不会立刻发生,他们可以用到React 16.4。在React 17里将被彻底移除。如果你开启了
static getDerivedStateFromProps当 什么是静态方法?一个静态方法就是存在于类内,而不是类的实例内的方法。静态方法访问不到 但是,问题来了。既然这个方法没有办法访问 static getDerivedStateFromProps(nextProps,prevState) { if(nextProps.currentRow === prevState.lastRow) { return null; } return { lastRow: nextProps.currentRow,isCrollingDown: nextProps.curentRow > prevState.lastRow } } 调用这个方法和之前调用 值得注意的事你需要定义初始state的值。无论是在 这个方法 如果定义了 一般你会使用一个回调来保证某些代码实在state更新之后才被调用的。那么,请把这些代码都移到 如果你不喜欢使用 ComponentName.getDerivedStateFromProps = (nextProps,prevState) => { // Your code here } Static Mode严格模式是一个新的方式来确保你的代码是按照最佳实践开发的。它实际是一个在 import {StrictMode} from 'react' class Application extends React.Component { render() { return ( <StrictMode> <Context.Provider value={{background: 'black',color: 'white'}}> <Header /> <Main /> <Footer /> </Context.Provider> </StrictMode> ); } } 如果一个在 AsyncMode异步模式在 如果你想学习更多异步模式的内容,你可以在下面的地方看到更多的文章和示例:
新版React Developer Tools这个作者发文的时候居然是Firefox支持了最新版的React。而Chrome还木有。。。 原文地址:https://medium.com/@baphemot/... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |