React入门|青训营笔记

你看我e吗
67 阅读3分钟

这是我参加"第四届青训营"笔记创作活动的第7天

在react中 { }里面写原生js语句，（）里面写html语句

创建项目

npx create-react-app 项目名称

安装依赖

npm i antd redux react-redux react-router-dom@6 axios less less-loader@6.0.0 --save

配置项目文件

import './assets/base.less';
import App from './App'
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <App />,
)

import React from "react";
import {Outlet} from 'react-router-dom'
import "./assets/base.css"
export default function App(){
  return (
    <div>
    <Outlet/>
  </div>
  )
}

\

所谓JSX语法就是在JS语言中使用标签，例如：const element = <h1>Hello, world!</h1>;

在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象，你可以在你的程序中把它保存在变量中或者作为参数传递。

父组件向子组件传值

子组件在父组件中使用，通过给父组件中的子组件绑定一个属性，然后子组件通过this.props.属性名即可获取父组件中的数据

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    // 将数据从Board组件传递到Square组件中
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

函数式组件

如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。函数组件写起来并不像 class 组件那么繁琐，很多组件都可以使用函数组件来写。

函数式组件的特点

  1. 函数式组件没有生命周期。
  2. 函数式组件没有this
  3. 函数式组件没有state状态
  4. 但是随着Hooks的出现，函数式组件变得灵活起来

Hook

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

1.useState

在函数组件里使用state，用useState。

2.useEffect

模拟三个生命周期（mounted（componentDidMount），updated（componentDidupdate），beforeDestroy（componentWillunmount））使用useEffect.

useEffect( callback , [] )如果数组是空数组，那么就代表任何一个数据的变化都不会触发callback函数。如果是useEffect( callback)那就代表所有的数据都会触发callback这个回调。

useEffect( () => {})

一般在useEffect里写ajax

3.useRef

用来获取元素或组件

4.createContext 上下文空间

const NumContext = createContext()

<NumContext.Provider value= {num}> <Father/> </NumContext.Provider>

上下文空间将数据包裹起来，那么在同一文件中的所有组件都可以共享这个数据。

const {setNum,num} = useContext(NumContext)

对象是没有前后顺序问题的，但是数组有！

Fragment与空标签

<></>这是空标签，相当于是根标签，在空标签里面可以添加组件内容。事实上，空标签的作用就是把组件包裹起来，但是空标签有一个缺点，就是不支持key和属性，空标签里面不能写任何属性，否则识别不出它是空标签，但是，<Fragment></Fragment>标签就很好的解决了这个问题，Fragment标签就是空标签的意思，除了可以加key和属性以外，没有其他任何含义！

\

Outlet组件

今天看到一段话是这样描述outlet的。说的是嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

受控组件与不受控组价

受控组件

受控组件和不受控组件只存在于表单元素，所谓的受控组件就是表单元素的value需要通过state（或useState）来定义。

不受控组件

不受控组件意味着表单元素的value无法通过state获取，只能使用ref（或useRef）来获取。

React Memo

如果组件的 props 没有更改，使用 memo 将导致 React 跳过渲染组件，可以提高性能。

React.memo() 是一个高阶函数,它与 React.PureComponent 类似,但是一个函数组件而非一个类。

avatar
文章
阅读
粉丝