易书网上书城网站建设方案,厦门微信网站开发,wordpress login 图标,效果型网站1. 是什么
react通过将组件编写的JSX映射到屏幕#xff0c;以及组件中的状态发生了变化之后React会将这些「变化」更新到屏幕上 在前面文章了解中#xff0c;JSX通过babel最终转化成React.createElement这种形式#xff0c;例如#xff1a;
div img src以及组件中的状态发生了变化之后React会将这些「变化」更新到屏幕上 在前面文章了解中JSX通过babel最终转化成React.createElement这种形式例如
div img srcavatar.png classNameprofile /Hello /
/div会被babel 转换成如下
React.createElement(div,null,React.createElement(img, {src: avatar.png,className: profile}),React.createElement(Hello, null)
);在转化过程中babel在编译时会判断JSX中组件的首字母
当首字母为小写时其被认定为原生DOM标签createElement的第一个变量被编译为字符串当首字母为大写时其被认定为自定义组件createElement的第一个变量被编译为对象
最终都会通过RenderDOM.render(…)方法进行挂载如下
ReactDOM.render(App /, document.getElementById(root));2. 过程
在react中节点大致可以分成四个类别
原生标签节点文本节点函数组件类组件
如下所示
class ClassComponent extends Component {static defaultProps {color: pink};render() {return ( div classNameborder h3ClassComponent/h3 p className{this.props.color}{this.props.name}/p /div ); }
}
function FunctionComponent(props) {return ( div classNameborderFunctionComponentp{props.name}/p /div );
}
const jsx ( div classNameborderpxx/p a href xxx/ a FunctionComponent name /ClassComponent name colorred //div
);这些类别最终都会被转化成React.createElement这种形式 React.createElement其被调用时会传入标签类型type,标签属性props及若干子元素children ,作用是生成一个虚拟Dom对象如下所示
function createElement(type, config, ...children) {if (config) {delete config.__self;delete config.__source; }//源码中做了详细处理比如过滤掉 ! key ref等const props {...config,children: children.map(child typeof child object ? child : createTextNode(child) ) };return {type,props};
}
function createTextNode(text) {return {type: TEXT,props: {children: [],nodeValue: text} };
}
export default {createElement
};createElement会根据传入的节点信息进行一个判断
如果是原生标签节点type是字符串如div、span如果是文本节点type就没有这里是TEXT如果是函数组件type是函数名如果是类组件type是类名
虚拟DOM会通过ReactDOM.render进行渲染成真实DOM,使用方法如下
ReactDOM.render(element,container[,callback])当首次调用时容器节点里的所有DOM元素都会被替换后续的调用则会使用React的diff算法进行高效的更新 如果提供了可选的回调函数callback ,该回调将在组件被渲染或更新之后被执行render大致实 现方法如下
function render(vnode, container) {console.log(vnode, vnode); //虚拟 DOM 对象// vnode _ nodeconst node createNode(vnode, container);container.appendChild(node);
}// 创建真实DOM节点
function createNode(vnode, parentNode) {let node null;const {type, props} vnode;if (type TEXT) {node document.createTextNode();} else if (typeof type string) {node document.createElement(type); } else if (typeof type function) {node type.isReactComponent? updateClassComponent(vnode, parentNode) : updateFunctionComponent(vnode, parentNode); } else {node document.createDocumentFragment(); }reconcileChildren(props.children, node);updateNode(node, props);return node;}//遍历下子 vnode 然后把子vnode- 真实DOM 再插入到父node中
function reconcileChildren(children, node) {for (let i 0; i children.length; i) {let child children[i];if (Array.isArray(child)) {for (let j 0; j child.length; j) {render(child[j], node); } } else {render(child, node); } }
}
function updateNode(node, nextVal) {Object.keys(nextVal) .filter(k k ! children) .forEach(k {if (k.slice(0, 2) on) { node.addEventListener(eventName, nextVal[k]); } else {node[k] nextVal[k]; } });
}
//返回真实 dom节点
// 执行函数
function updateFunctionComponent(vnode, parentNode) {const {type, props} vnode;let vvnode type(props);const node createNode(vvnode, parentNode);return node;
}// dom// 先实例化再执行render函数
function updateClassComponent(vnode, parentNode) {const {type, props} vnode;let cmp new type(props);const vvnode cmp.render();const node createNode(vvnode, parentNode);return node;
}
export default {render
};3. 总结
渲染流程如下所示
使用React.createElement或JSX编写React组件实际上所有的JSX代码最后都会转换成React.createElement(…),Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理并获取defaultProps对默认props进行赋值并且对传入的孩子节点进行处理最终构造成一个虚拟DOM对象ReactDOM.render将生成好的虚拟DOM渲染到指定容器上其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化最终转换为真实DOM
