React的基础api

React.createElement()
- 作用：用来创建一个React元素
- 参数：
  1. 参数的名称 button/div/p(html标签必须小写)
  2. 标签中的属性
    - class属性需要使用className来设置
    - 在设置事件时，属性名修改需要驼峰命名法
  3. 元素的内容（子元素）
- 注意点
  - React元素最终会通过虚拟DOM转换为真实DOM元素
  - React元素一经创建就无法修改，只能通过新创建的元素进行替换
ReactDOM.createRoot() 操作dom，将要挂载的dom转为React对象
root.render()
- 用来将React元素渲染到根元素上
- 根元素中所有内容都会被删除，被React元素替换
- 当重复调用render()时，React会将两次渲染的结果对比(diff)，它会确保只修改那些变化的元素，对DOM做最少的操作
事件命名

React.createElement('button',{
    onClick: ()=>{
        alert('你干嘛')
    },
    id:'btn',
    type:'button'
})

事件需要驼峰命名法，并且要写成函数的形式

jsx

要使用jsx有两步
- 引入babel
- 将script type设置为text/babel
jsx就是js的扩展，可以把html和js混合在一起写，比如jsx就是React.createElement()的语法糖

const div = <div>
    <p>你好呀</p>
    <button>我是一个大按钮</button>
    </div>

注意事项
- jsx中的html标签要小写，React组件应该大写开头
- jsx中有且仅有一个根标签，且标签必须要正确结束
- 在jsx中可以使用{}嵌入表达式(有值的就是表达式：{1+1},{name})
- 在jsx中，属性可以直接在标签里面设置
  1
  const div = <div id="box" onClick={()=>{alert('哈喽google')}}>我是一个div</div>
  - style必须传对象设置：
  1
  style{{backgroundColor:'yello',border:'10px red solid'}}

渲染列表

比如我们有一个数组num = [1,2,3,4,5,6],想要让它成为ul里的列表，其实每一个就是

想要渲染列表，所以我们可以调用数组中的map方法，map方法就是重新创建一个新数组，让新数组重新赋值为
{item}
{item}

let arr = [1,2,3,4,5,6]
arr = arr.map(item=><li>{item}</li>)
const list = <ul>{arr}</ul>

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(list)

虚拟dom

在React我们操作的元素被称为React元素，并不是真正的原生DOM，React通过虚拟DOM 将React元素和原生DOM，进行映射，虽然操作的React元素，但是这些操作操作最终都会真实DOM中体现
- 好处有以下三点：
  1. 降低API复杂度
  2. 解决兼容问题
  3. 提升性能（减少DOM的不必要操作）
- 每当我们调用root.render(),页面就会发生重新渲染，React通过diffing算法，将新的元素和旧的元素进行比较，并且只对变化的元素进行修改，没有变化的不去修改
- 每一个item都需要有一个key，相当于是key-value的形式，如果数组现在是[1,2,3],我想添加一个[4,1,2,3]，虽然看起来只添加了一个元素，但是其实后面三个的顺序都改变了，如果没有key就会造成性能问题，因此我们需要给每一个item都添加一个key，可以就是他们本身，这样diff算法在比对的时候就知道该如何高性能修改了。
- 注意：开发中一般会采用数据的id作为key，尽量不要使用index作为key，因为你添加了一个元素在数组中，这个元素后面的所有索引也会被改变。用稳定、不重复的 id，比如数据库里的主键。

创建React项目

使用React脚手架

1
2
3

npx create-react-app my-app
cd my-app
npm start

React的基础api

jsx

在jsx中，属性可以直接在标签里面设置

渲染列表

虚拟dom

创建React项目