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函数 字符串 数组 对象