前一段时间React v16.0发布了,作为react骚年,我们当然要关注版本更新之后,react新增了哪些特性呢?
//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>
现在 React 15.6.2 和 React 16 都是基于 MIT 协议了。
好啦,以上就是React V.16 的更新内容,完整更新日志请查看React v16.0。