[!note]
- jsx语法(标签、js表达式,判断,循环,事件绑定)
- jsx是语法糖, 需要被解析成js才能运行(h函数的使用)
- jsx是独立的标准,可以被其他项目使用
// 下面的代码实际执行流程: // jsx 代码 const user = { firstname : 'xiugang', lastname : 'zhang' } var profile = <div> <img src="a.jpg" classname='profile'/> <h3>{[user.firstname, user.lastname].join(' ')}</h3> </div> // 解析结果(重点掌握),关键点:是使用了一个react.createelement来创建节点的 var profile = react.createelement('div', null, [ react.createelement('img', {src : 'a.jpg', classname : 'profile'}), react.createelement('h3', null, [[user.firstname, user.lastname].join(' ')]) ]) /* @jsx h*/ // 1. 使用插件:cnpm install babel-plugin-transform-react-jsx // 2. 开始编译jsx: babel --plugins transform-react-jsx demo.js // 3. 可以自定义react.createelement变为一个h函数: /* @jsx h*/
正好符合vdom的应用场景
js reactdom.render(<app/>, container)
会触发patch(vnode, newvnode)
react.createelement(todoinput, { addtitle: this.addtitle.bind(this) }), react.createelement(todolist, { data: this.state.list }) // 上面的代码相当于是先去创建一个todolist实例对象 var list = new todolist({ data: this.state.list }); // 然后再去调用这个函数的render方法(返回的是一个jsx,然后对当前的这个jsx渲染为vdom) var vnode = list.render();
// 1. 每个组件实例,都有rendercomponent方法 class component { constructor(){ } // 每个组件都有这个函数 rendercomponent(){ // 获取上一次的vnode const prevvnode = this._vnode; // render函数只需之后,得到的还是一个新的node const newvnode = this.render(); // 开始对比,找出差异 patch(prevvnode, newvnode); // 更新node为最新的node this._vnode = newvnode; } } // 2. 执行rendercomponent会重新执行实例的render方法 // 3. render函数返回newvnode,然后拿到prevnode(也就是上次的vnode)----多次执行setstate视图最终也只会渲染一次 // 4. 执行patch(prevnode, newvnode)
[!note]
- setstate通过一个队列机制实现state更新,当执行setstate时,会将需要更新的state很后放入状态队列,而不会立即更新this.state,队列机制可以高效地批量更新state。如果不通过setstate而直接修改this.state的值
- 那么该state将不会被放入状态队列中。当下次调用setstate并对状态队列进行合并时,就会忽略之前修改的state,造成不可预知的错误
- 同时,也利用了队列机制实现了setstate的异步更新,避免了频繁的重复更新state
并不妨碍两者都能实现相同的功能
“开放封闭原则”
组件化更适合选择react
都是数据驱动视图
如果团队水平较高,推荐使用react,组件化和jsx
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论