React 介绍
React:用户构建用户界面(UI)的 JS 库,简单理解就是写页面的 JS 库
特点:
1、声明式:对比命令式。
声明式:what
命令式:how
2、组件化
3、跨平台:不仅能够开发web端应用还可以开发移动端安卓、ioss应用,VR应用
创建 react 项目
npx create-react-app 项目名称
JSX
JSX 是什么:在 js 中写 HTML 标签(页面结构)
幽灵节点:不会渲染任何内容,可以同时渲染多个标签
<></>
JS 表达式:能够通过 console.log(表达式)打印出的内容就是表达式
语法:
{}
特点:有值
条件渲染:
1、三元表达式
2、函数 + if/else
3、逻辑与 (&&)
列表渲染:
1、使用数组的 map 方法
2、列表渲染需要给每个元素添加 key 属性
3、key 要唯一(number、string)
样式:
1、行内样式 : style={width:'50px'}
2、className(推荐)
组件的基本使用
react 有两种组件:
1、函数组件
2、class组件
两种组件的区别:
1、函数组件没有状态也叫无状态组件 负责静态结构的展示
2、class组件有状态也叫有状态组件 提供状态,提供交互
绑定事件的语法:
1、on + 事件名称 = (事件处理程序 如 onClick=(()=>{}))
2、onMouseEnter
事件对象:通过事件处理程序的参数拿到事件对象
事件处理程序中 this 指向问题
1、推荐:领用箭头函数形式的实例方法 如 hanclleClick=()=>{}
2、在coustructor函数 + bind
3、在事件绑定的位置写成箭头函数return的写法