十分鐘帶你快速了解React16新特性

//最佳實踐：將ErrorBoundary抽象為一個公用的組件類

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {
 constructor(props) {
 super(props)
 this.state = { hasError: false }
 }
 componentDidCatch(err, info) {
 this.setState({ hasError: true })
 //sendErrorReport(err,info)
 }
 render(){
 if(this.state.hasError){
 return <div>Something went wrong!</div>
 }
 return this.props.children
 }
}

//使用方式
render(){
 return (
 <div>
 <ErrorBoundary>
 <Profile user={this.state.user} />
 </ErrorBoundary>
 <button onClick={this.onClick}>Update</button>
 </div>
 )
}

//string
render(){
 return 'hello,world'
}

//number
render(){
 return 12345
}

//boolean
render(){
 return isTrue?true:false
}

//null
render(){
 return null
}

//fragments，未加key標識符，控制臺會出現warning
render(){
 return [
 <div>hello</div>,
 <span>world</span>,
 <p>oh</p>
 ]
}

//實現一個簡易蒙層效果，抽象出一個通用的Overlay組件
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Overlay extends Component {
 constructor(props) {
 super(props);
 this.container = document.createElement('div');
 document.body.appendChild(this.container);
 }
 componentWillUnmount() {
 document.body.removeChild(this.container);
 }
 render() {
 return ReactDOM.createPortal(
 <div className='overlay'>
 <span className='overlay-close' onClick={this.props.onClose}>×</span>
 {this.props.children}
 </div>,
 this.container
 )
 }
}
//該組件對應的樣式如下
.overlay{
 box-sizing:border-box;
 position: fixed;
 top:50%;
 left:50%;
 width:260px;
 height:200px;
 margin-left:-130px;
 margin-top:-100px;
 padding:10px;
 background-color: #fff;
 outline: rgba(0,0,0,.5) solid 9999px;
}
.overlay-close{
 position: absolute;
 top:10px;
 right:10px;
 color:red;
 cursor: pointer;
}

class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
 overlayActive: false
 }
 this.closeOverlay = this.closeOverlay.bind(this);
 this.showOverlay = this.showOverlay.bind(this);
 }
 closeOverlay() {
 this.setState({ overlayActive: false })
 }
 showOverlay() {
 this.setState({ overlayActive: true })
 }
 render() {
 return (
 <div className="App">
 <div>hello world!</div>
 {this.state.overlayActive &&
 <Overlay onClose={this.closeOverlay}>overlay content</Overlay>}
 <button onClick={this.showOverlay}>show</button>
 </div>
 );
 }
}

//錯誤寫法
render(){
 return(
 <div a={()=>{}} onclick={this.showOverlay}></div>
 )
)
//Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
//Warning: Invalid value for prop `a` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

selectCity(e){
 const newValue = e.target.value;
 this.setState((state)=>{
 if(state.city===newValue){
 return null;
 }
 return {city:newValue}
 })
)

react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).