2022-03-27 React 第一天

一、React基本使用

1.安装

npm i react react-dom

react 包是核心，提供创建元素，组件等功能；react-dom 包提供DOM相关功能。

2. 在页面中引用（了解）

（1）引入react和react-dom的两个js文件

（2）创建React元素，并挂载到页面（和虚拟DOM对象是一个东西）

注意：如果在HTML页面中下载react包，首先初始化package.json。npm init -y

二、使用React脚手架初始化项目

1.无需安装脚手架包，就可以直接使用npx包提供的初始化命令：

npx create-react-app my-react

2.启动项目，在项目根目录执行命令：

 npm start

3.脚手架中使用React
使用import关键字导入react、react-dom包后，即可使用

import React from 'react'
import ReactDOM from 'react-dom'

yarn命令简介

初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖： yarn

三、JSX的简单使用

1.创建JSX

// 使用 小括号包裹JSX，从而避免JS中自动插入分号报错
const name = (
  我是一个JSX
)
ReactDOM.render(name, document.getElementById('root'))

2.嵌入JS表达式

语法：{ JavaScritp表达式 }

// 在JSX中使用js表达式
const age = 22 //初始化变量
const sayHi = () => 'Hello react!' //定义函数

const jsBox = (
  // 一个JSX要用一个根节点元素包裹
  
    {/* 使用单花括号包裹js表达式 */}
    {age}
    {/* js中的数据也是表达式 */}
    {1}
    {'a'}
    {1 + 1}
    {3 > 5 ? '大于' : '小于或等于'}
    {/* 函数调用也可以 */}
    {sayHi()}

    {/* 错误示例 */}
    {/* 单花括号内不能放js对象，一般只用于style样式中;也不能是if语句、for循环语句 */}
    {/* {{ a: '我是a' }}
    {if(true){}}
    { for(let i = 0;i<10;i++){}} */}
  

)
ReactDOM.render(jsBox, document.getElementById('root'))

注意：
（1）一个JSX要用 一个根节点 元素包裹
（2）只要是合法的 js表达式 都可以进行嵌入
（3）JSX自身也是js表达式
（4）js中的对象是一个例外，一般只会出现在style属性中
（5）在{}中不能出现语句
说明：表达式和语句
（1）表达式会产生一个值，可以在左侧用const a = 接收。

a
a+1
fn()
arr.map()
function(){}

3.条件渲染

条件渲染：if语句、三元表达式、逻辑与运符

const isShow = true
// if语句
// const ifShow = () => {
//   if (isShow) {
//     return (
//       渲染成功
//     )
//   }
//   return (此处隐藏)
// }

// 三元表达式
// const ifShow = () => isShow ? (渲染成功
) : (此处隐藏)

// 逻辑与运算符：当isShow为真时才渲染后面的JSX
const ifShow = () => isShow && (渲染成功)
const ifBox = (
  {ifShow()}
)
ReactDOM.render(ifBox, document.getElementById('root'))

4.列表渲染

// 循环渲染：map()函数，遍历旧数组，返回一个新数组，新数组的元素都是由旧数组元素一一映射而来。
// 必须有key值，且key值要唯一。避免使用索引值
const arr = [
  { id: 1, name: '马冬梅' },
  { id: 2, name: '王祖贤' },
  { id: 3, name: '吴彦祖' }
]
const forBox = (
  
    {arr.map(item =>
      ({item.name})
    )}
  
)
ReactDOM.render(forBox, document.getElementById('root'))

如果需要渲染一组数据，我们应该使用数组的 map () 方法
渲染列表的时候需要添加 key属性，key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
尽量避免使用索引号作为key

5.样式处理

// 样式处理
const styleBox = (
  
    我是一个JSX
  
)
ReactDOM.render(styleBox, document.getElementById('root'))

用 className 代替 class
style 的单括号内可以放js对象

6.图片引入

必须把图片 先引入到页面，将引入的图片放到img标签的 src属性 位置。

import Icon from '@/assets/img/icon.png';

7. 插槽使用

四、React组件

1.函数组件

（1）函数名首字母大写，React据此来区分组件和普通react元素
（2）必须有返回值,返回的内容表示该组件的结构。可以返回null

// function Hello () {
//   return (
//     Hello React!
//   )
// }
const Hello = () => Hello React!!!
ReactDOM.render(, document.getElementById('root'))

2.类组件

（1）类名称必须要大写字母开头
（2）类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
（3）类组件必须提供 render 方法
（4）render方法中必须要有return返回值

// 类组件
// 组件名首字母大写;必须继承自React.Component父类;内部必须有render()函数;render()函数必须有返回值
class Hi extends React.Component {
  render () {
    return (
      Hi React!
    )
  }
}
ReactDOM.render(, document.getElementById('root'))

3.将组件抽离成单独的.js文件

// 导入react
import React from 'react'

// 创建组件
class Hello extends React.Component {
  render () {
    return (
      Hello React!我是单独抽离的组件
    )
  }
}

// 导出组件
export default Hello

4.组件的事件绑定

类组件中有this，函数组件中没有this
（1）类组件事件绑定：详情见第二天组件状态state。
（2）函数组件事件绑定

// 函数组件绑定事件
// 函数组件内部没有this
function Appp () {
  function handleClick () {
    console.log('事件绑定函数触发了！');
  }
  return (
    
  )
}
ReactDOM.render(, document.getElementById('root'))

5.React事件绑定说明

（1）通过 onClick 形式为组件绑定事件。（注意大小写）
（2）React用的是自己封装的事件，而不是原生的DOM事件。（为了更好的兼容性）
（3）React中的事件时通过 事件委托 来处理的，委托给 组件最外层元素。（为了更高效）
（4）通过 event.target 获取到实际触发事件的DOM元素。
（5）onClick={this.handleClick} 是将 handleClick 函数本身 作为点击事件的处理函数。
（6）onClick={this.handleClick()} 是将handleClick函数的 返回值 作为点击事件的处理函数。