React笔记大全(全 续集)

袁剑
121 阅读4分钟

OIP-C.jpg

01 : React的基本语法和使用

React中 组件定义有两种方法:

  • 函数组件
  • 类组件

组件的名称要遵循 大驼峰写法

  • 函数组件:

  • 函数组件就是一个 返回 jsx 对象的函数

  • 类组件:

  • 类组件必须是 React.Component 的子类 声明组件时必须 定义 render函数 并且必须 返回一个 jsx对象 作为组件的 视图结构

02 : jsx标签基本用法

  • 内容插值:
  • jsx 语法 允许使用 { } 的方式对内容进行插值 插入的内容可以是 字面量 变量 表达式
  • 循环:
  • 循环的重点几乎是将数据数组转化为 jsx 对象组成的数组
  • 使用 map(item,index)=> { }方法进行循环遍历 key值等于index
  • 条件判断
  • 条件判断是根据某些条件控制标签 显示/隐藏 创建或销毁

03: styles样式的使用:

  • 一般为标签添加最直接的方法 style属性 class属性 （因为与class不起冲突 这里改为 className属性）
  • style属性:
  • 在标签内部直接定义 style={ { color:red/color } }
  • className属性:
  • 这里可以借助 classNames模块 实现灵活类名管理 导入使用像插件一样的导入方式 import classNames from 'classNames'
  • 用法： className={ classNames( '类名',{ 可以是表达式 } ) } (注意:这里的类名使用的是外部链接样式 事先要先导入!)

04: events事件

  • 在React中添加事件 需要声明式的语法在标签行内属性进行注册
  • 具体的语法格式是 { on + 事件类型名称 = 事件函数 }
  • 期望使自定义参数方法来使用 onClick={ () => { } }
  • 函数组件添加事件:
  • 可以在属性的值上直接通过函数 函数默认可以获取到一个事件对象的参数
  • 类组件事件函数
  • 类组件的事件函数主要额外注意事件函数的定义位置 和 this执行问题

05: state状态

  • 类组件状态由两种定义方式:
  • 1、 this上定义 state属性 属性值是一个对象(优先级更高)

image.png

  • 2、 class的简化语法 直接定义 this属性(推荐写法)

image.png

在类组件中只能使用 this.setState() 方法 来修改当前组件状态否则无法触发视图效果更新

setState( ) 方法的参数需要接收一个对象 React会把这个对象和组件的 state 对象进行合并操作 效果类似于 Object.assgin()

06：受控组件(form)

  • React中受控组件 一般指的是表单标签
  • React对 表单的事件进行了适当的改造 input事件被替换成了 change 事件
  • 在使用input标签时 不能只为标签设置状态 value属性 否则会让标签变为只读 用户无法输入内容 处理的方式是: value + onChange 组合 或者使用 defaultValue 替代 value 或者添加 onChange 事件

07: Props

  • React允许在父组件中使用子组件 在子组件行内中添加自定义属性 被使用组件内部特定语法进行接收 对于子组件来说 被添加的行内属性统称 Propos
  • 类组件爱爱你接收的行内属性会自动收集到 this.props 上在构造器(controuster)中 必须使用 super传递props 否则不会获取到

08: slots (插槽)

import { Component } from "react";

class Card extends Component {
  render() {
    console.log(this.props);
    //传递内容形式的不同 children 属性值获取的结果也不同
    //1. 只传递文本 属性值为字符串
    //2. 传递单个标签 属性值为对应 jsx 对象
    //3. 传递多个标签 属性值是 jsx 对象组成的数组 数组内容的顺序就是标签的书写顺序
    //获取的内容只有当前组件的直接子标签
    //jsx 对象是标签的另一种表现形式 可以直接在标签结构内插值使用
    //一般情况下 children 全部作为默认插槽的内容
    //想要实现具名插槽 可以通过行内属性的方式传递子组件 (普通的 props方式)

    let { header, footer, CaraAside } = this.props;

    return (
      <fieldset>
        <legend>卡片</legend>
        <h2 className="card-header">{header}</h2>
        <div className="card-content"> {this.props.children}</div>
        <p className="card-footer">{footer}</p>
        <CaraAside></CaraAside>
      </fieldset>
    );
  }
}

class Panel extends Component {
  state = {
    x: "父组件的状态值",
  };

  render() {
    let { children: Children } = this.props;
    let { x } = this.state;

    return (
      <fieldset>
        <legend>函数 children</legend>
        <Children a="1" x={x}></Children>
        {Children({ b: 2, x })}
      </fieldset>
    );
  }
}

image.png

09：context(上下文)

  • 创建上下文对象 不负责制作数据 只负责传递数据

const context = createContext( );

  • 获取组件树的状态注入组件和子组件的状态消费组件

const { Provider, Consumer } = context;

  • 在函数内 通过 this.context 属性获取注入的值

et { text, changeText } = this.context;

前端框架处理数据的原则 哪里提供数据 对应的也需要提供修改数据的方法 使用数据的位置上不要直接修改数据 唯一数据源 + 单向数据流

avatar
文章
阅读
粉丝