JSX本质是什么

JSX语法
举几个例子

JSX中注释方式
{/*需要注释的内容*/}
HTML标签在里面也都支持
可以在render中写判断
{show ? <img src=".....">}//如果show这个变量存在显示图片 否则不显示
在render中循环
<ul>
   {list.map((item,index)=>{
   return<li key={index}>{item}</li>
 })}
 <p style={{color:red}}></p>
 也可以const colorstyel={color:red}
  <p style={colorstyel}></p>
    <p className="contain"></p>
  colorstyel
</ul>

每个react 组件中都需要引入 react component 其中component在每个组件继承的时候都会用到 但是react用在哪里了?react用在了模板解析上面了
JSX解析成JS 例如

var  profile = <div>
                            <img src="avatar.png" className = "profilr" />
                            <h3>{[user.firstName，user.lastName].join('')}</h3>
                     </div>
   解析成的js代码就是如下所示
   var  profile = React.createElement("div",null,
        React.createElement('img',{src:'avatar.png',className:'profile'}),
        React.createElement('h3',null,[user.firstName,user.lastName].join('')),
 )                  

jsx实际是语法糖
开发环境会将jsx编译成js代码
jsx的写法大大降低了学习成本和编码工作量 相相比于vdom的h函数来说
独立的标准

jsx和vdom的关系
react中为何需要vdom
Vdom是React推广开来的 结合jsx
jsx就是模板 最终要渲染成HTML
初次渲染+修改state后的re-render
正好符合vdom的应用场景

react.createElement 和 h 函数在执行的时候都返回vnode
何时patch
初次渲染会执行patch的第一个用法把vnode渲染到一个空的容器中
re-render - setState会触发patch第二种用法 新的数据vnode替代旧的但是只替代改变的
自定义组件的解析(就是自己封装的组件)
React.creatElement(‘自定义组件名’,‘属性’)
div 直接渲染

即可 vdom可以做到
input和list自定义组件(class) vdom默认不认识 input和list是自定义组件名
因此input和list定义的时候必须声明render函数
根据props初始化实例 然后执行实例的render函数
render函数返回的还是vnode对象
自定义组件都是通过new 自定义组件 .render()函数 一直到没有自定义的组件然后解析
为什么需要vdom 因为jsx需要渲染成HTML 数据驱动视图
React.createElement和H函数都生成了 vnode h函数的第一个属性总是标签名 React.createElement函数生成的vnode 第一个参数可以是一个自定义组件名 然后new出一个实例创建一个render()函数
何时Patch:ReactDOM.render(…)和setState就是render()函数创建和数据改变
自定义组件的解析 : 初始化实例 然后执行render函数 这点不是太明白 查下
React setState的过程
setState的异步
setState为何需要异步 因为可能会一次执行多次setState 没必要每次setState都会重新渲染 考虑性能 及时每次重新渲染 用户也看不到中间的效果 只看到最后的效果就行了
在setState上面打印state 和 下面打印结果是一样的这足以说明setState是异步的 如果想要打印改变的数就在setState里面加一个回调 这个回调里面自带 this.renderComponent()函数是继承自Component这个父类里面的这个函数的作用就是
renderComponent(){ const prevVonde = this._vonde const newVonde = this,render() patch(prevVnode，newVnode) this._vonde = newVnode }
Vue修改属性也是异步
setState的过程