react 笔记

vscode  bookmarks
react源码 v18.2.0
jsx语法转换成reactelement

reactapi
npx creatte-react-app 项目名称（myreactapp）
cd 项目名称（myreactapp）
npm start启动项目
看index.js文件  React  ReactDom App
看App.js文件
react有函数式组件，一种是类组件
官方推荐函数式组件，因为类组件写法复杂  冗余 包含生命周期函数  的书写使用
项目中也会有很多之前项目用的是 类组件的方式，今天先讲函数式组件
语法 jsx  是javaScript语法与html语法书写在一起---jsx语法
  app  是根组件  
jsx语法 ：
1.return 后面加（）
2.只能返回一个根元素，如果解决多个根元素可以用空标签包裹
3.标签（单标签 双标签）进行正确的闭合
4.jsx 的插值 {}  写法   插值使用位置 标签内容   标签属性
5.条件渲染  变量=开始标签+内容+结束标签 不需要用引号
6.列表渲染 
对数组用map  处理加上标签，  用到{}  返回新数组  新数组用{}放到return 中呈现
   key是在虚拟DOM中保证当前dom的唯一性
   key不建议使用index  建议将数据加上一个id保证唯一

  循环遍历  多个根标签遍历  用 Fragment 标签包裹 ，把key放到这个标签上

7.事件操作
JSX 中属性都是以驼峰形式   事件的名称是函数名称用{}包裹

8.常见useState  状态的使用
vue中会生成响应式数据，响应式数据可以驱动页面更新 --这也是vue减少dom操作的一种手段
react中页面更新需要一个useState函数   字符串  数组  对象