React 入门学习笔记

npx create-react-app demo 创建react demo ,此命令行不需要提前安装create-react-app 脚手架，创建demo后就会删除了

vue 微信小程序 都是MVVM框架

react 是MVC框架

jsx 文件首字母必须大写用于区分html标签;文件名可以是js或者jsx，不影响文件中的代码

React.StrictMode 启用严格模式，仅在开发模式运行，他们不会影响生产构建；可以为任何部分启用严格模式

• 识别不安全的生命周期
• 关于使用过时字符串ref API的警告
• 关于使用废弃的findDOMNode方法的警告
• 检测意外的副作用
• 检测过时的context API
• 确保可复用的状态

React.Component class组件

• 子类中必须定义render()函数

• 生命周期

  • 挂载

    • constructor()

      在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。
      通常，构造函数仅用于以下两种情况：
      通过给 this.state 赋值对象来初始化内部 state;
      为事件处理函数绑定实例

      constructor(props) {
          super(props);
          // 不要在这里调用 this.setState()
          this.state = { counter: 0 };
          this.handleClick = this.handleClick.bind(this);
      }
      

    • render()

      render() 方法是 class 组件中唯一必须实现的方法

    • static getDerivedStateFromProps() 不常用

    • componentDidMount()

  • 更新

    • static getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()

  • 卸载

    • componentWillUnmount()

  • 错误处理

    • static getDerivedStateFromError()
    • componentDidCatch()

• 其他APIs

  • setState()
  • forceUpdate() 强制让组件重新渲染

• class属性

  • defaultProps

    可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。例如：

    class CustomButton extends React.Component {
    // ...
    }
    
    CustomButton.defaultProps = {
    color: 'blue'
    };
    

    如果未提供 props.color，则默认设置为 'blue'

    render() {
        return <CustomButton /> ; // props.color 将设置为 'blue'
    }
    

  • displayName

    displayName 字符串多用于调试消息。通常，你不需要设置它，因为它可以根据函数组件或 class 组件的名称推断出来。如果调试时需要显示不同的名称或创建高阶组件

• 实例属性

  • props
  • state

JSX语法糖

属性使用驼峰命名 htmlFor、className
style属性特殊，使用对象;
属性填写变量是，不需要加引号

<label htmlFor="userName"></label>
<input className="input" type="text" name="userName"/>
<p style={{color: 'red'}}>这是红色的</p>
<p style={styleVal}>这是蓝色的</p>

三元运算与循环

<p style={{backgroundColor: isRed ? 'red' : 'blue'}}>这是红色吗： {isRed}</p>
<ul>
    {
    arr.map((ele,index) => {
        return <li key={index}>{ele}</li>
    })
    }
</ul>

写法简化与vs扩展安装

ES7+ React 扩展插件

• rcc -> react class component class式组件
• rfc -> react function component 函数式组件

setState、事件 用法

import React, { Component } from 'react'

export default class SetState extends Component {
  constructor(props){
    super(props)
    this.state = {
      num: 0
    }

    this.addFun = () => {
      return this.setState({
        num: this.state.num + 1
      })
    }
  }

  render() {
    return (
        <>
        <div>数字为：{this.state.num}</div>
        <button onClick={() => this.setState({num: this.state.num + 1})}>累加</button>
        <button onClick={this.addFun}>累加</button>
        </>
    )
  }
}