React中的JSX语法
JSX是一种接近javascript的语法扩展,可以使用大括号的形式包裹javascript表达式作为属性值,元素属性名要使用小驼峰的形式来命名,在这里和javascript有所不同,例如JS中的class变为className,JS中的for变为htmlFor。具体使用方法如下。
import React,{Component} from 'react';
class App extends Component {
render(){
return(
<div className=‘li1’>举例 </div>
)
}
}
JSX的主要原理是使用React.createElement()的方法来创建元素,展示如下。
class App extends Component {
render(){
return(React.createElement('div',{className;‘li1’},‘举例’)
}
}
createElement方法讲解如下
React.createElement(
type,//被创建的元素类型,例如div、a、p
[props],//元素的属性
[...children]//元素的子节点
)
下面是ReactDOM的render方法介绍。
render(element,container,callback);
render函数中第一个参数为react渲染的虚拟dom,第二个参数为浏览器真实dom,第三个参数为可选的回调函数。render函数用于将虚拟dom挂载到container上,并返回element的实例,如果该组件为无状态组件,则返回null。回调函数在组件挂载完毕后执行。
*ReactDOM.unmountComponentAtNode(container)该方法用于从DOM中卸载组件(事件处理器和state也一并清除),如果容器中该组件未被挂载,则函数返回false,如果组件被移除将会返回 true。