React,基础+组件生命周期+组件传参

React是用于构建用户界面的JavaScript库

用于组件开发

起源

React 起源于 Facebook 的内部项目,
因为该公司对市场上所有 JavaScript MVC 框架,都不满意,
就决定自己写一套,用来架设Instagram 的网站。
做出来以后,发现这套东西很好用,就在2013年5月开源了。

react安装 

        ts版本创建项目名称 create-react-app 项目名称 ---template typescript

        cd项目目录

        npm start 启动

        npm build 打包

        npm eject 显示配置文件

文件说明

 jsx语法

        { } js表达式

        { /**/ } 注释

        className类名

        数组可以有html标签,自动展开功能

        style对象会自动展开

        有且只有一个根节点

事件

onClick={ 函数 }

事件传参

        1)onClick={ say.bind(this,参数)}

        2)onClick={ e=>{ say(参数) } }

state状态

        setState({ k:value })

表单的双向绑定

        <input value={state.msg} onChange={(e)=>this.setState({msg:e.target.value})}></input>

dom引用

        import React, { Component,createRef } from 'react'

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 的 Class 组件生命周期可以分为以下几个阶段: 1. Mounting(挂载阶段): - constructor:初始化组件的状态和绑定事件。 - static getDerivedStateFromProps(props, state):根据入的 props 更新 state。 - render:渲染组件的内容。 - componentDidMount:组件第一次渲染之后调用,通常用于发送网络请求或订阅事件。 2. Updating(更新阶段): - static getDerivedStateFromProps(props, state):根据入的 props 更新 state。 - shouldComponentUpdate(nextProps, nextState):决定是否重新渲染组件。默认情况下,每次 state 或 props 更新都会触发重新渲染。 - render:渲染组件的内容。 - componentDidUpdate(prevProps, prevState):组件更新之后调用,通常用于更新 DOM 或执行其他副作用操作。 3. Unmounting(卸载阶段): - componentWillUnmount:组件卸载之前调用,通常用于清理定时器、取消订阅等操作。 4. Error Handling(错误处理阶段): - static getDerivedStateFromError(error):在子组件抛出错误时调用,返回一个新的 state 以渲染错误信息。 - componentDidCatch(error, info):在子组件抛出错误后调用,通常用于记录错误信息。 这些生命周期方法提供了在组件不同阶段执行代码的机会,方便开发者进行管理和控制。不过需要注意的是,在 React 16.3 之后,官方已经推荐使用函数组件React Hooks 来替代 Class 组件生命周期方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值