React学习笔记四：React简介-初识

React简介

用于构建用户界面
React Native通过原生JavaScript构建原生应用

React的特点

1. 虚拟DOM
   • 无需记忆复杂的DOM API
   • 兼容性更好
   • 性能更好(diff算法更新DOM）
2. 声明式编程
3. 基于组件化
4. 支持服务器端渲染
5. 快速，简单，易学

Hello，World！

• 复习

// 通过DOM向页面中添加一个div
// 创建一个div
const div = document.createElement('div');
div.innerText = 'Hello，World！'
const app = document.getElementById('app')
app.appendChild(div)

• React
  • React.createElement()； 用来创建一个React元素

  参数：

  1. 元素名（html标签必须小写）
  2. 元素中的属性
     • class属性需要使用className设置
     • 事件属性必须使用驼峰命名
     • 事件需要是一个函数
  3. 元素的子元素（内容）

  • ReactDOM.createRoot()

  React元素要插入的位置

  • root.render()

  用来将react元素渲染到根元素中 根元素中的所有内容都将被删除，被React元素所替换

<!-- react基础库-->
<script src="https://unpkg.com/react@18.0.0/umd/react.development.js"></script>
<!-- react-dom库-->
<script src="https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js"></script>
<script>
    // 创建一个React元素
    const button = React.createElement('button',{id:'btn',className:'btn'，onClick:()=>{alert(123)}},'我是一个react创建的按钮')
    const div = React.createElement('div',{}, 'div元素', button)
    // 获取根元素 React元素插入位置
    const app = ReactDOM.createRoot(document.getElementById('app'))
    // 渲染
    app.render(div)
</script>

注意点：

• React元素最终会通过虚拟DOM转换为真实的DOM元素；
• React一旦创建就无法修改，只能通过新创建的元素进行替换；
• 修改React元素后，必须重现对根元素进行渲染
• 当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分，没有发生变化的保持不变