优化反应： 虚拟dom解释
Posted java落叶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了优化反应： 虚拟dom解释相关的知识，希望对你有一定的参考价值。
了解反应的虚拟dom，并使用此知识加快应用程序。在这个全面入门的框架内部入门中，我们将揭开JSX的神秘化，让您展示如何做出反应，解释如何找到瓶颈，并分享一些避免常见错误的提示。
当事情发生的时候你肯定会感觉到。输入字段会得到laggy，复选框会先检查一下，情态动词会出现困难的时候。
在JSX后面
div
<div className='cn'> Content!</div>
React.createElement(
'div',
{ className: 'cn' },
'Content!');
<div className='cn'> Content 1! <br /> Content 2!</div>
React.createElement(
'div',
{ className: 'cn' },
'Content 1!', // 1st child
React.createElement('br'), // 2nd child
'Content 2!' // 3rd child)
-
基元 false,null,undefined以及 true -
阵列 -
反应 组件
React.createElement(
'div',
{ className: 'cn' },
['Content 1!', React.createElement('br'), 'Content 2!'])
function Table({ rows }) {
return (
<table>
{rows.map(row => (
<tr key={row.id}>
<td>{row.title}</td> </tr> ))}
</table> );}
React.createElement
<table>
<Table rows={rows} />
React.createElement(Table, { rows: rows });
String
props.
将组件放在页面上
ReactDOM
render
function Table({ rows }) { /* ... */ }
// defining a component
// rendering a componentReactDOM.render(
React.createElement(Table, { rows: rows }),
// "creating" a component
document.getElementById('#root')
// inserting it on a page);
ReactDOM.render
React.createElement
// There are more fields, but these are most important to us{
type: Table,
props: {
rows: rows
},
// ...}
这些对象构成了虚拟dom在反应上的意义。
div
React.createElement(
'div',
{ className: 'cn' },
'Content 1!',
'Content 2!',);
{
type: 'div',
props: {
className: 'cn',
children: [
'Content 1!',
'Content 2!'
]
}}
React.createElement
children
props
<div className='cn' children={['Content 1!', 'Content 2!']} />
ReactDOM.render
如果 type属性持有 弦 使用标记名称-创建一个标记，其中列出了下面列出的所有属性 props.如果我们有一个函数或类 type-调用它并递归地重复一个结果。 如果有什么 children下 props-逐个重复这个过程，并将结果放置在父节点的Dom节点内。
<table> <tr> <td>Title</td> </tr> ...</table>
重建在
ReactDOM.render
// Second callReactDOM.render(
React.createElement(Table, { rows: rows }),
document.getElementById('#root'));
// before update{ type: 'div', props: { className: 'cn' } }
// after update{ type: 'div', props: { className: 'cn' } }
设想2： type仍然是同一个字符串， props是不同的。
// before update:{ type: 'div', props: { className: 'cn' } }
// after update:{ type: 'div', props: { className: 'cnn' } }
type
设想3： type已经变了不同 String或从 String到组件上。
// before update:{ type: 'div', props: { className: 'cn' } }
// after update:{ type: 'span', props: { className: 'cn' } }
===
type
情景4： type是一个组件。
// before update:{ type: Table, props: { rows: rows } }
// after update:{ type: Table, props: { rows: rows } }
“可是什么都没变！”你也许会说，你会错的。
type
render
照顾孩子
// ...props: {
children: [
{ type: 'div' },
{ type: 'span' },
{ type: 'br' }
]},// ...
// ...props: {
children: [
{ type: 'span' },
{ type: 'div' },
{ type: 'br' }
]},// ...
props.children
div
span
key
key
// ...props: {
children: [ // Now React will look on key, not index
{ type: 'div', key: 'div' },
{ type: 'span', key: 'span' },
{ type: 'br', key: 'bt' }
]},// ...
当状态发生变化时
props
state
class App extends Component {
state = { counter: 0 }
increment = () => this.setState({
counter: this.state.counter + 1,
})
render = () => (<button onClick={this.increment}>
{'Counter: ' + this.state.counter}
</button>)}
counter
this.setState
钉住问题
state
?react_perf
我们的大部分业绩问题都属于这两类。
修理东西：安装/安装
<div> <Message /> <Table /> <Footer /></div>
// ...props: {
children: [
{ type: Message },
{ type: Table },
{ type: Footer }
]}// ...
Message
div
Table
div
props.children
React.createElement
Message
Table
Footer
// ...props: {
children: [
{ type: Table },
{ type: Footer }
]}// ...
children[0]
Message
Table
type
Table
// Using a boolean trick<div>
{isShown && <Message />}
<Table />
<Footer /></div>
Message
props.children
div
children[0]
false
true/false, null
undefined
type
// ...props: {
children: [
false, // isShown && <Message /> evaluates to false
{ type: Table },
{ type: Footer }
]}// ...
Message
Table
Table
type
function withName(SomeComponent) {
// Computing name, possibly expensive...
return function(props) {
return <SomeComponent {...props} name={name} />; }}
class App extends React.Component() {
render() {
// Creates a new instance on each render
const ComponentWithName = withName(SomeComponent);
return <SomeComponentWithName />;
}}
render
// On first render:{
type: ComponentWithName,
props: {},}// On second render:{
type: ComponentWithName, // Same name, but different instance
props: {},}
ComponentWithName
render:
// Creates a new instance just onceconst ComponentWithName = withName(Component);
class App extends React.Component() {
render() {
return <ComponentWithName />;
}}
修复事物：更新
有办法告诉别人不要看某个分支，这样做是很好的，因为我们相信它没有变化。
shouldComponentUpdate
render
true
false
false
props
state
class TableRow extends React.Component {
// will return true if new props/state are different from old ones
shouldComponentUpdate(nextProps, nextState) {
const { props, state } = this;
return !shallowequal(props, nextProps)
&& !shallowequal(state, nextState);
}
render() { /* ... */ }}
React.PureComponent
React.Component
shouldComponentUpdate
Component
PureComponent
extends
<Table
// map returns a new instance of array so shallow comparison will fail
rows={rows.map(/* ... */)}
// object literal is always "different" from predecessor
style={ { color: 'red' } }
// arrow function is a new unnamed thing in the scope, so there will always be a full diffing
onUpdate={() => { /* ... */ }}/>
PureComponent
Row
props
state
shallowCompare
PureComponent
DFG_LY
DFG_LY将为您推送精品阅读
以上是关于优化反应： 虚拟dom解释的主要内容，如果未能解决你的问题，请参考以下文章