React基础语法及生命周期

·歪腻·

已于 2022-12-09 09:00:20 修改

阅读量225

点赞数

文章标签： react.js javascript 前端

于 2022-12-08 22:04:57 首次发布

本文链接：https://blog.csdn.net/wzy199982/article/details/128244381

版权

React

React的特点

采用组件化思维
采用单向数据流
操作虚拟的dom
由facebook（脸书公司）发布
竞品：Vue、Angular

创建React项目

全局安装脚手架

npm i -g create-react-app

创建项目

create-react-app myreact

cd myreact

运行项目

npm start

在这里插入图片描述

React的基础语法

jsx语法

说明：JavaScript与html混合的写法
特点
- {}执行js
- 有且只有衣蛾根节点
- （/* */注释内容）
- 类名使用className
- 数组可以有html标签
- style对象会自动展开

模板语法

文本渲染
条件渲染
列表渲染

function App (){
  let msg ="你好中国react!"
  let text = "2023年还有<strong>一个月</strong>就到了"
  let flag = true;
  let isLog = true;
  let list = ["Vue","React","Uni-app","小程序"];

  return (<div>
    <h1>模板语法</h1>
    <h2>列表渲染</h2>
    {
      list.map((item,index)=><h4 key={index}>{item}</h4>)
    }
    <div>
      {msg.split('').map((item,ind)=><p key={ind}>{item}</p>)}
    </div>

    <h2>条件渲染</h2>
    {isLog&&<p>欢迎回来主人</p>}
    {flag?<p>成功</p>:<p>失败</p>}

    <h2>文本渲染</h2>
    <p>{msg}</p>
    <div dangerouslySetInnerHTML={{__html:text}}></div>
  </div>)
}
export default App

组件

函数组件：负责战术，也称为视图组件
- props父组件传递的参数
- 没有this
类组件：处理数据，也称为容器组件
- state数据
- 生命周期器
- props父组件传递的参数
- 有this
推荐使用函数组件
数据和处理数据通常放在容器组件里面

事件与响应函数

onClick={()=>{响应内容}}
onClick={this.say}

函数的参数

匿名函数：onClick={()=>this.say(参数)}
bind：onClick={this.Hi.bind(this,参数)}

state数据

this.setState({ })更新数据

表单

受控表单

state与表单绑定
<input value={this.state.msg} onChange={e => this.setState({ msg: e.target.value })} />

非受控表单

通过ref
导入：import { createRef } from ‘react’;
创建一个引用：this.inpRef = createRef();
< input type=“text” ref={this.inpRef} />
<button onClick={() => alert(this.inpRef.current.value)}>获取值</ button>

组件的传参

容器组件App
Size控制大小
Color控制颜色
父传子：props传参
子传父：props回调函数方式

React的生命周期

解释

react组件在从1创建到销毁会经理一系列过程，在这些过程执行回调函数，称为生命周期钩子函数

挂载

constructor构造函数
static getDerivedStateFromProps (nextProps,prestate)
props更新触发state更新（要求返回一个新的state)
nextProps最新的props，preState更新前的state
render渲染
componentDidMount组件已经更新（props，state，dom，ref都己经完成更新)
- 作用：注册监听事件，定期器，dom操作，ajax请求