React的基本使用

• 1. React的基本使用
  • 1.1. 安装脚手架create-react-app
  • 1.2. 创建项目
• 2. JSX语法
  • 2.1. VSCode配置
  • 2.2. 插值
  • 2.3. 列表渲染
  • 2.4. 条件渲染
  • 2.5. 事件绑定
• 3. React组件
  • 3.1. 类组件
    • 3.1.1. 存在的问题
  • 3.2. 无状态组件
• 4. 组件状态提升（组件通信）
• 5. Props的定义
  • 5.1. 限制prop类型
  • 5.2. prop默认值
  • 5.3. children
  • 5.4. 类名的操作

1. React的基本使用

1.1. 安装脚手架create-react-app

我们需要在我们的电脑上全局安装脚手架create-react-app

npm i -g create-react-app

1.2. 创建项目

我们可以利用脚手架创建我们的项目

create-react-app 项目名

有些使用windows的PowerShell可能会报错，我们可以输入cmd切换到cmd环境中

2. JSX语法

JSX指的就是在JS代码中直接写HTML代码，所谓的HTML其实就是JSX

2.1. VSCode配置

2.2. 插值

我们可以将变量通过{}的形式插入到我们JSX中

<div>
  {msg}
</div>

2.3. 列表渲染

可以用来渲染数组，在渲染后记得添加key

<ul>
  {
    数据.map((item, index) => <li key={index}>{item}</li>)
  }
</ul>

<!-- vue的写法对比 -->
<ul>
  <li v-for="item in 数据">{{item}}</li>
</ul>

2.4. 条件渲染

JSX中不支持if else，只能使用三元运算

{
  { show ? <div>show为true时显示</div> : <></> } 
}

<!-- <></>表示空标签 -->

2.5. 事件绑定

React中所有的事件已on事件类型形式体现，例如onClick

<button onClick={函数}>按钮</button>

<!-- 如果需要传参 -->
<button onClick={() => {函数(参数)}}>按钮</button>

3. React组件

react中有两种组件类组件、无状态组件（函数式组件），在react16.8之后更新了hooks，以后的组件会更多的使用无状态组件。

3.1. 类组件

import { Component } from "react";

class ClassComponent extends Component{ // 这里必须继承React.Component
  // 构造函数
  constructor (props) {
    super(props) // 必须要写super()
    this.state = { // 这里就是Vue中的data
      msg: "这是我的第一个类组件"
    }
    // 如果要设置state要用setState({msg: "新的内容"})
  }

  handle () {
    // 事件函数
  }

  render () {
    return (
      <div>{this.state.msg}
        // 在类组件中存在一个问题，就是事件函数中this指向的问题，所以在绑定事件事件时需要添加.bind(this)
        <button onClick={this.handle.bind(this)}></button>
      </div> 
    )
  }
}

export default ClassComponent

3.1.1. 存在的问题

• 类组件中state固定，无法复用
• 事件中this指向问题，不直接指向组件
• 设置state很麻烦，获取state及事件都需要添加this.xxx

3.2. 无状态组件

无状态组件就是一个函数

const FuntionComponent = () => {
  return (
    <div>
      JSX
    </div>
  )
}
export default FunctionComponent

4. 组件状态提升（组件通信）

通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父（祖先）组件中去

当我们需要把组件Child中的数据放置在Parent中获取时，这个操作叫组件的状态提升，通过props可以向子组件传递
Parent.js

const Parent = () => {
  return (
    <div>
      <Child 属性名="数据" 属性名={动态数据}></Child>
    </div>
  )
}

export default Parent

Child.js

const Child = (props) => {
  return (
    <div>
      {props.属性名} // 就是传递过来的数据
    </div>
  )
}

export default Child

5. Props的定义

props是父组件传递到子组件中的数据，写在子组件标签上

parent.js

const Parent = () => {

  return (
    <div>
      <Child msg="消息"></Child>
    </div>
  )
}

child.js

const Child = (props) => {

  return (
    <div>
      {props.msg}
    </div>
  )
}

5.1. 限制prop类型

需要安装prop-types模块

child.js

import PropTypes from 'prop-types'

const Child = (props) => {

  return (
    <div>
      {props.msg}
    </div>
  )
}

Child.propTypes = {
  msg: PropTypes.string
}

5.2. prop默认值

可以定义prop的默认值，通过defaultProps

child.js

import PropTypes from 'prop-types'

const Child = (props) => {

  return (
    <div>
      {props.msg}
    </div>
  )
}

Child.propTypes = {
  msg: PropTypes.string
}

Child.defaultProps = {
  msg: "默认值"
}

5.3. children

这是props中特殊的一个值，当我们给组件标签中添加内容时，内容会自动变成props.children，通过这样的方式，可以实现，在标签上写内容，渲染到子组件中的效果

Parent.js

const Parent = () => {

  return (
    <div>
      <Child>内容</Child>
    </div>
  )
}

Child.js

const Child = (props) => {

  return (
    <div>
      {props.children} // 这个值就是我们父组件中在子组件标签内添加的内容
    </div>
  )
}

5.4. 类名的操作

需要借助模块classnames

import classNames from 'classnames'
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'