react rxjs,reactor模式

文章目录 JSX是什么？为什么要使用JSX？

JSX是什么？ function Comp(props){ return <h1>hi {props.name}</h1>}const jsx=(<div id="demo"> 大家好 <span>jsx其实是一个对象</span> <Comp name="xz"/></div>)console.log('jsx',jsx)ReactDOM.render(<jsx />, document.querySelector('#root'));

我们可以console.log 看到 jsx 其实是一个Object，包含了各种属性key、type、props、refs等等
$$typeof 属性可以看出这是一个ReactElement

可以看到children里面的span标签也是一样的结构
自定义组件Comp的type则是一个函数

我们可以看一下源码，以16.8.6为例
JSX代码会被Babel编译为React.createElement，调用createElement() 返回一个ReactElement对象

export function createElement(type, config, children) { let propName; const props = {}; let key = null; let ref = null; let self = null; let source = null; //中间参数处理省略... return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, );}

可以看到ReactElement是一个工厂函数，创建ReactElement对象

const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key, ref: ref, props: props, _owner: owner, }; if (__DEV__) {...} return element;};

【JSX是什么？】JSX是JavaScript XML的简写，其实是函数调用和表达的语法糖，最终会转化为生成虚拟DOM 的js代码。

【虚拟DOM是什么？】虚拟DOM是描述DOM结构的对象

为什么要使用JSX？ 写代码更快类型安全，在渲染之前会转义，防止注入攻击（XSS攻击）开发效率