【React】知识点归纳：React JSX、虚拟DOM、模块与组件和模块化与组件化的理解

  • Z时代
  • 2024-01-10
  • 分类：综合

react

JSX

1)全称: JavaScript XML

2)react定义的一种类似于XML的JS扩展语法: XML+JS
3)作用: 用来创建react虚拟DOM(元素)对象
var ele = <h1>Hello JSX!</h1>

注意1: 它不是字符串, 也不是HTML/XML标签

注意2: 它最终产生的就是一个JS对象
4)标签名任意: HTML标签或其它标签
5)标签属性任意: HTML标签属性或其它
6)基本语法规则

a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

b.遇到以{ 开头的代码，以JS 语法解析: 标签中的js代码必须用{ }包含
7)babel.js的作用

a.浏览器不能直接解析JSX代码, 需要babel 转译为纯JS的代码才能运行

b.只要用了JSX，都要加上type="text/babel" , 声明需要babel来处理

虚拟DOM

1)React提供了一些API来创建一种 特别 的一般js对象
var element = React.createElement('h1', {id:'myTitle'},'hello') 这就是一个简单的虚拟DOM对象

2)虚拟DOM对象最终都会被React转换为真实的DOM

3)我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

渲染虚拟DOM(元素)

1)语法: ReactDOM.render(virtualDOM, containerDOM)
2)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3)参数说明

  • 参数一: 纯js或jsx创建的虚拟dom对象

  • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

创建虚拟DOM的2种方式

1)纯JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title)
2)JSX:
<h1 id='myTitle'>{title}</h1>

模块与组件和模块化与组件化的理解

模块

1)理解: 向外提供特定功能的js程序, 一般就是一个js文件

2)为什么: js代码更多更复杂

3)作用: 复用js, 简化js的编写, 提高js运行效率

组件

1)理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)

2)为什么: 一个界面的功能更复杂

3)作用: 复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

如图：

React面向组件编程

1、自定义组件(Component) :

/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
  return <h2>工厂函数组件(简单组件)</h2>
}

/*方式2:  ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {
  render () {
    console.log(this) // MyComponent2的实例对象
    return <h2>ES6类组件(复杂组件)</h2>
  }
}

2、 渲染组件标签

ReactDOM.render(<MyComponent />, document.getElementById('example1'))

注意

1)组件名必须首字母大写

2)虚拟DOM元素只能有一个根元素

3)虚拟DOM元素必须有结束标签

render()渲染组件标签的基本流程

1)React内部会创建组件实例对象

2)得到包含的虚拟DOM并解析为真实DOM

3)插入到指定的页面元素内部

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_component_basic</title>
</head>
<body>
  <div id="example1"></div>
  <div id="example2"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    //1、定义组件  两种
    // 方式一：工厂函数组件（简单组件;没有状态的组件）
    function  MyComponent() {
      return <h2>工厂函数组件（简单组件）</h2>
    }
    // 方式二：ES6类组件（复杂组件）
    class MyComponent2 extends React.Component{
      render(){
        console.log(this)
        return <h2>ES6类组件（复杂组件）</h2>
      }
    }
    //2、渲染组件标签
    ReactDOM.render(<MyComponent />,document.getElementById('example1'))
    ReactDOM.render(<MyComponent2 />,document.getElementById('example2'))
  </script>
</body>
</html>

运行效果

以上是 【React】知识点归纳：React JSX、虚拟DOM、模块与组件和模块化与组件化的理解 的全部内容， 来源链接： utcz.com/z/381380.html

回到顶部