[React框架学习笔记]两天速成React之第一天

创建一个react工程npx

• 安装命令npx create-react-app react-app(react-app是工程名字)
  • npx会下载创建后自动删除，所以每次都会是最新的版本
• 如果报错如下

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

• 先运行npm uninstall -g create-react-app清除缓存再运行安装命令

入口文件

我们可以删掉src文件夹下的所有文件，然后创建一个index.js

import ReactDOM from 'react-dom'
ReactDOM.render(
  <h2>你好</h2>,
  document.getElementById('root') // public里面index.html中的root
)

我们页面就会变成一个出现你好了

class类组件

第一个react组件

import React from 'react'

// 类组件
class App extends React.Component {
  render () {
    return (
      <div>
        <h2>hello world!</h2>
        <input type="text" />
      </div>
    )
  }
}
export default App

---

• 1.文件名可以是jsx或者js，不影响文件中的代码
• 2.组件名称必须大写
• 3.JS中出现()代表其中想要写html
• 4.HTML中出现{}代码其中想要写js — 比如赋值
• 5.其实export default也可以写道class前面
• 6.JSX的语法可以在vscode中配置
  • vscode首选项>设置>include Language>添加javascript： javascriptreact>搜索trigger启用Trigger Expansion On Tab

组件中一些html的一些小区别

因为jsx可以写xml和js，所以中间会有一些冲突，然后解决这些冲突，就导致了一些属性有变化—换了个名字

原html	jsx写法
label-for	label-htmlFor
class	className
style=""	style={{}}

• 注意：style属性要写成驼峰形式
• 组件要有一个根元素，可以是空标签<> </>

for循环

let arr = ['刘备', '关羽', '张飞']
        <ul>
          {
            // React中的列表循环有且只有map可以使用
            // 只有map才有返回值，forEach没有
            arr.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>

代码简化与扩展安装

• 安装vscode扩展—（ES7+React/Redux/React-Native）
• 快捷指令rcc — (react class component)
• 快捷指令rfc — (react function component)

组件进阶之小技巧

使用state

• 直接修改变量没有办法更新视图
• 使用state

import React, { Component } from 'react'
// let num = 1
export default class App2 extends Component {
  state = {
    num: 1
  }
  render () {
    return (
      <div>
        <h2>数字位:{this.state.num}</h2>
        <button onClick={
          () => this.setState({ num: this.state.num + 1 })
        }>累加</button>
      </div>
    )
  }
}

setState的三种方式

• 直接匿名函数(简单代码)
• 写一个函数，然后使用bind改变this指向
• 写一个函数，用匿名函数调用

  state = {
    num: 1
  }
  addNum () {
    this.setState({ num: this.state.num + 1 })
    // console.log(this.state.num);
  }
  render () {
    return (
      <div>
        <h2>数字位:{this.state.num}</h2>
        <button onClick={
          () => this.setState({ num: this.state.num + 1 })
        }>按钮1 - 累加</button>
        <button onClick={this.addNum.bind(this)}>按钮2 - 累加</button>
        <button onClick={() => this.addNum()}>按钮3 - 累加</button>
      </div>
    )
  }

函数的传参

  btnClick (num) {
    console.log(num);
  }
  render () {
    return (
      <div>
        <button onClick={() => this.btnClick(1)}>按钮1</button>
        <button onClick={() => this.btnClick(2)}>按钮2</button>
      </div>
    )
  }

function函数组件

特点

• 1.函数式组件没有生命周期
• 2.函数式组件没有this
• 3.函数式组件没有state状态
• Hooks(钩子)
  • React官方提供的hook
  • 开发人员自定义的hook

useState

• Hook只能用在组件函数中的最顶层

  const [num, setNum] = useState(1)
  return (
    <>
      <div>{num}</div>
      <button onClick={() => setNum(num + 1)}>累加</button>
    </>
  )

useEffect

数据请求 检测数据更新 垃圾回收

• 检测数据更新，检测哪个数据更新，就把这个变量填写到数组中
• 当要检测的式页面中所有的变量，你有两个选择
  • 1.把所有变量都填写到数组中
  • 2.直接删掉数组
• 当不想检测页面中任何数据的更新,可以直接给个空数组

  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(1)
  useEffect(() => {
    console.log('num1更新了');
    return () => {
      console.log('销毁阶段')
    }
  }, [num1])
  return (
    <>
      <div>{num1}</div>
      <button onClick={() => setNum1(num1 + 1)} >累加</button>
      <div>{num2}</div>
      <button onClick={() => setNum2(num2 + 1)} >累加</button>
    </>
  )

组件传参

父传子

import React from 'react'
// 子组件
function Child (props) {
  return <h2>子组件 - {props.num}</h2>
}
// 父组件
function Father (props) {
  return <Child num={props.num} />
}
// 顶级组件
export default function App7 () {
  return (
    <Father num={123456} />
  )
}

子传父

• 无论式vue 小程序还是react,所谓的子传父，真实在干活的式父组件

// 子组件
function Child (props) {
  return (
    <>
      <h2>子组件 - {props.num}</h2>
      <button onClick={() => props.setNum(123456)}>修改num</button>
    </>
  )
}
// 父组件
function Father (props) {
  return <Child num={props.num} setNum={props.setNum} />
}

// 顶级组件
export default function App7 () {
  const [num, setNum] = useState(123)
  return (
    <Father num={num} setNum={setNum} />
  )
}

context

传孙子组件，太过繁琐，我们使用上下文空间，这个和vue里面的provide，inject注入很像

import React, { useState, createContext } from 'react'

// 创建上下文空间(provider,consumer)
const NumContext = createContext()

// 子组件
function Child () {
  return (
    <NumContext.Consumer>
      {
        ({ num, setNum }) => (
          <>
            <h2>{num}</h2>
            <button onClick={() => setNum(456)}>修改num</button>
          </>
        )
      }
    </NumContext.Consumer>
  )
}
// 父组件
function Father () {
  return <Child />
}

// 顶级组件
export default function App8 () {
  const [num, setNum] = useState(123)
  return (
    <NumContext.Provider value={{ num, setNum }}>
      <Father />
    </NumContext.Provider>
  )
}

useContext

简化直接解构

function Child () {
  const { num, setNum } = useContext(NumContext)
  return (
    <>
      <h2>{num}</h2>
      <button onClick={() => setNum(456)}>修改num</button>
    </>
  )
}