JSX
我们可以理解JSX
是JS语法和XML语法的一种结合体。比如:
const element = <h1>Hello, world!</h1>;
React认为界面的渲染逻辑其实是和其他Ui逻辑存在内在的耦合。比如:需要绑定事件处理程序,通知UI状态变化,以及需要展示准备好的数据。
所以它并没有像之前的开发流程一样,将js和html放在不同的文件中。而是将html和Js逻辑共同写在组件
中。
元素是构成 React 应用的最小砖块。
以往我们在写html的界面的时候,一般用dom标签表示一个元素,比如一个div
元素。
但是在React中,元素的概念稍有不同,React中的元素指的是创建的一个小的对象。这个对象元素会由React-Dom
中的API更新成Dom节点,并且这个Dom节点和那个react对象元素保持一致。
比如将一个React元素渲染为一个Dom节点:
const root = <div>root</div>
ReactDOM.render(root,document.getElementById('root'))
React元素是一个不可变对象。一旦被创建,就无法更改它的子元素或者属性。
更新UI的唯一方式就是创建一个全新的元素,并使用ReactDom.render()
进行渲染。
但是:React只更新它需要更新的部分
。
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
React DOM
会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
上面的代码中,尽管每一秒都会新建(调用render方法重新渲染)
一个描述整个 UI 树的元素,React DOM
只会更新实际改变了的内容(时间信息)
。
组件其实是代码中拆分出来的可复用的代码片段
。
在React中的表现形式主要是函数组件
和class组件
。
函数组件写法:
import React from 'react';
export default const Filter = (props) => {
return (
<div>filter</div>
)
}
class组件写法:
import React from 'react';
class Filter extends Component {
render() {
return <div>Filter</div>
}
}
如果你理解react的元素其实是一个对象
。那么state其实是这个对象里的一个属性
。
因为它的确是react基础组件的构造器
中的一个属性:
var ReactCompositeComponentMixin = {
/**
* Base constructor for all composite component.
*
* @param {?object} initialProps
* @param {*} children
* @final
* @internal
*/
construct: function(initialProps, children) {
ReactComponent.Mixin.construct.call(this, initialProps, children);
this.state = null;
this._pendingState = null;
this._compositeLifeCycleState = null;
},
看到了么?
this.state = null
生命周期是react为组件挂载,组件更新,组件接收参数,以及组件卸载时定义的一些方法。
具体的方法有:
react在写这段逻辑的时候采用了策略模式
。
先将方法策略写在ReactCompositeComponentInterface
这个接口对象中,然后根据name
属性的不同,执行不同的策略。
var specPolicy = ReactCompositeComponentInterface[name];
文档上只是说不需要使用 addEventListener
为已创建的 DOM 元素添加监听器。并且介绍了传递参数的方式。
我们可以这样理解:它其实是对原生的addEventListener
进行了进一步的包装。因为它定义的EventListener
如下:
var EventListener = {
/**
* Listens to bubbled events on a DOM node.
*
* @param {Element} el DOM element to register listener on.
* @param {string} handlerBaseName 'click'/'mouseover'
* @param {Function!} cb Callback function
*/
listen: function(el, handlerBaseName, cb) {
if (el.addEventListener) {
el.addEventListener(handlerBaseName, cb, false);
} else if (el.attachEvent) {
el.attachEvent('on' + handlerBaseName, cb);
}
},
/**
* Listens to captured events on a DOM node.
*
* @see `EventListener.listen` for params.
* @throws Exception if addEventListener is not supported.
*/
capture: function(el, handlerBaseName, cb) {
if (!el.addEventListener) {
console.error(
'You are attempting to use addEventlistener ' +
'in a browser that does not support it support it.' +
'This likely means that you will not receive events that ' +
'your application relies on (such as scroll).');
return;
} else {
el.addEventListener(handlerBaseName, cb, true);
}
}
};
当然这只是一小部分,复杂的逻辑需要我们深入的去研究。
在Vue中条件渲染存在v-if
和v-show
的区别。通常来说v-if
是真正的条件渲染,v-show
只是控制display
属性的展示与否。
但是在react中,元素的更新时创建一个新的元素对象,所以这里的条件渲染就和v-if
类似了。
受控组件一般是指具有内部状态state
的组件。通常多见与表单。state对象中的属性值,只能通过setState
进行更新。
其实就是组件的内部状态控制。
从表象来看,props和state都是一个对象。
不同的是props是传递给组件的,而state是组件内部的属性。
从本质上来讲:props是构造函数的参数。state是构造函数的属性
。
这样说也不准确,准确的说法应该是:
props和state都是构造函数的属性,不同的是props的值是从构造函数的参数中获取的,而state的值是直接声明的。
本文分享自 JavaScript高级程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!