Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React16的新特性(内附实例) #40

Open
riskers opened this issue Oct 14, 2018 · 0 comments
Open

React16的新特性(内附实例) #40

riskers opened this issue Oct 14, 2018 · 0 comments
Labels
FE web 前端

Comments

@riskers
Copy link
Owner

riskers commented Oct 14, 2018

注: 本文说的 React16 是指当前最新版本 16.5.2 ,而不是指 16.0.0。很多特性都是在 16.0.0 之后陆陆续续加的,而不是在一次性在 16.0 加入的。特别是 getDerivedStateFromProps 在 16.4.0 之后还改过一次。

createRef

实例: https://stackblitz.com/edit/react16-ref

之前已经有 string ref(将被废弃) 和 callback ref,React16 新加入 createRef:

// init
this.btnRef = React.createRef();

// access
this.btnRef.current

new Context API

实例: https://stackblitz.com/edit/react16-new-context

// init
const Context = React.createContext();

// use
<Context.Provider value={/*...*/}>

<Context.Consumer>
	{value => {
		//...
	}}
</Context.Consumer>

life cycle

新加入 componentDidCatch / getDerivedStateFromProps / getSnapshotBeforeUpdate 三种生命周期,并且将 componentWillMount / componentWillReceiveProps / componentWillUpdate 置为 UNSAFE

componentDidCatch

实例: https://stackblitz.com/edit/react-componentdidcatch

static getDerivedStateFromProps

实例: https://stackblitz.com/edit/react-getderivedstatefromprops

组件实例化后接受新 props 后被调用,需要 return 一个对象来更新状态返回null表示新的props不需要任何state更新

getSnapshotBeforeUpdate

在react render()后的输出被渲染到DOM之前被调用。

React.Fragment

实例: https://stackblitz.com/edit/react16-fragments

一直以来,React render 只能 return 组件,不能是 string、 array、 boolean等值,这其实限制了开发者的能力。React 16 给我们带来了这些新功能:

// string
render() {
	return 'this is string'
}

// number
render() {
	return 123
}

// boolean
render() {
	return true && <div>abc</div>
}

另外,render return 要求一定要有一个根组件,而开发者就不得不在外层套一个 <div>,现在 React16 也给了我们方法:

// 方法1: 返回 array,不过每一项必须有 key
render() {
	return [
		<h1 key="a">a</h1>,
		<h1 key="b">b</h1>,
	]
}

// 方法2: React.Fragment
render() {
	return (
		<React.Fragment>
			<h1>a</h1>
			<h1>b</h1>
		</React.Fragment>
	)
}

// 方法3: 其实还是 React.Fragment,不过是简写
render() {
	return (
		<>
			<h1>a</h1>
			<h1>b</h1>
		</>
	)
}

portal

实例: https://stackblitz.com/edit/react-portal-tips

React.createPortal 可以让开发者在组件中写逻辑,而在页面的别的位置渲染出来:

render() {
	return ReactDOM.createPortal(
	  <div>
	    this is a dialog
	  </div>,
	  document.body
	);
}

向我捐助 | 关于我 | 工作机会


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE web 前端
Projects
None yet
Development

No branches or pull requests

1 participant