快速了解React 16新特性

 //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>
 ]
}

    ReactDOM.createPortal(child, container)

import React from "react";
import {createPortal} from 'react-dom';
import style from './app.css';class Modal extends React.Component{   constructor() {
       super(...arguments);       const doc = window.document;
       this.node = doc.createElement('div');
       doc.body.appendChild(this.node);
   }   render() {
       // React does *not* create a new div. It renders the children into `divNode`.
       // `divNode` is any valid DOM node, regardless of its location in the DOM.
       // console.log(this.props.children,"this.props.children")
       return createPortal(
           this.props.children, //塞进传送门的JSX
           this.node //传送门的另一端DOM node
       );
   }   componentWillUnmount() {
       window.document.body.removeChild(this.node);
   }
}class App extends React.Component{
   constructor(props) {
       super(props);
       this.state = {showModal: false};
       
       this.handleShow = this.handleShow.bind(this);
       this.handleHide = this.handleHide.bind(this);
   }   handleShow() {
       this.setState({showModal: true});
   }
   
   handleHide() {
       this.setState({showModal: false});
   }   render(){
       // Show a Modal on click.
       // (In a real app, don't forget to use ARIA attributes
       // for accessibility!)
       const modal = this.state.showModal ? (
           <Modal>
               <div className={style.modal}>
                   <div className={style.innerCon}>
                       <p>这是一个模态框<p/>
                       <button onClick={this.handleHide}>关闭modal</button>
                   </div>
               </div>
           </Modal>
       ) : null;         return(
             <div className={style.app}>
               <p className={style.header}>
               This div has overflow: hidden.
               <button onClick={this.handleShow}>打开modal</button>
               {modal}
               </p>
             </div>
       )
   }
}ReactDOM.render(<App />,  document.getElementById("#root"));}

class ErrorBoundary extends React.Component {
 constructor(props) {
   super(props);
   this.state = { error: null, errorInfo: null };
 }
 
 componentDidCatch(error, errorInfo) {
   // Catch errors in any components below and re-render with error message
   this.setState({
     error: error,
     errorInfo: errorInfo
   })
   // You can also log error messages to an error reporting service here
 }
 
 render() {
   if (this.state.errorInfo) {
     // Error path
     return (
       <div>
         <h2>Something went wrong.</h2>
         <details style={{ whiteSpace: 'pre-wrap' }}>
           {this.state.error && this.state.error.toString()}
           <br />
           {this.state.errorInfo.componentStack}
         </details>
       </div>
     );
   }
   // Normally, just render children
   return this.props.children;
 }  
}class BuggyCounter extends React.Component {
 constructor(props) {
   super(props);
   this.state = { counter: 0 };
   this.handleClick = this.handleClick.bind(this);
 }
 
 handleClick() {
   this.setState(({counter}) => ({
     counter: counter + 1
   }));
 }
 
 render() {
   if (this.state.counter === 5) {
     // Simulate a JS error
     throw new Error('I crashed!');
   }
   return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
 }
}function App() {
 return (
   <div>
     <p>
       <b>
         This is an example of error boundaries in React 16.
         <br /><br />
         Click on the numbers to increase the counters.
         <br />
         The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
       </b>
     </p>
     <hr />
     <ErrorBoundary>
       <p>These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.</p>
       <BuggyCounter />
     </ErrorBoundary>
     <hr />
   </div>
 );
}ReactDOM.render(
 <App />,
 document.getElementById('root')
);

function MyComponent() {
   return(
       <div mycustomattribute="something" />
       <div tabIndex={0 / 0} />
       <div myData={this.state}></div>
       <div className={function() {}} />
       <div className={false} />
   )
}

// react 15
<div ></div>
<div ></div>
<div ></div>// react 16
<div mycustomattribute="something" tabindex="-1"></div>
<div mydata="[object Object]"></div>
<div tabindex="NaN"></div>