首页 > 其他分享 >react 咻咻咻

react 咻咻咻

时间:2023-03-21 16:37:24浏览次数:44  
标签:咻咻咻 render react state props 组件 路由


# react 必知必会

1. 函数式组件(简单无状态场景) / class类式组件 (复杂有状态场景)
2. react思想:状态驱动UI
3. 组件实例三大核心:refs/props/state
4. class = function + hooks
5. this.state = {isHot:true}
const isHot = this.state
# 1. hello world

<div id="example"></div>
<script type="text/babel">
const vdom= <h1>Hello, world!</h1>;
ReactDOM.render(vdom,document.getElementById('example'));
</script>

react 咻咻咻_html

# 2. 函数式组件

react 咻咻咻_Test_02

# 3. 类组件

react 咻咻咻_Test_03

# 4. 函数和class组合场景

react 咻咻咻_Test_04

react 咻咻咻_Test_05

#  5. state 和 props
(我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上)
(https://www.runoob.com/react/react-props.html)

react 咻咻咻_html_06

# 6. 切换按钮点击事件
(https://www.runoob.com/react/react-event-handle.html)

react 咻咻咻_html_07

# 7. 事件传参
(https://www.runoob.com/react/react-event-handle.html)

react 咻咻咻_生命周期_08

# 8. 案例演示1
(事件是通过改变status状态来实现的,等同于通过变量param控制UI)

react 咻咻咻_html_09

# 9. 表达式和html在{ }中混编
(true && expression 总是返回 expression,而 false && expression 总是返回 false)

react 咻咻咻_Test_10

# 10. 条件判断:三目运算

react 咻咻咻_Test_11

# 11. 阻止组件渲染

react 咻咻咻_html_12

# 12. 列表渲染

react 咻咻咻_Test_13

# 13. key值传递
(如果要传递key值,需要借助id)
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);

react 咻咻咻_生命周期_14

# 14. 生命周期
(结果:
Component WILL MOUNT!
Component DID MOUNT!
Component WILL RECEIVE PROPS!
Component WILL UPDATE!
Component DID UPDATE!
)

react 咻咻咻_Test_15

# 15. react请求数据更新status状态

react 咻咻咻_生命周期_16

# 16. form表单输入框变更监听

react 咻咻咻_html_17

react 咻咻咻_生命周期_18

# 17. 下拉菜单提交

react 咻咻咻_Test_19

# 18. 输入框和单选

react 咻咻咻_html_20

 ==============================华丽分割线==================================

# 1. 简洁版写法

react 咻咻咻_生命周期_21

# 2. props传递对象写法

# 其他 (复制person对象,并修改/添加name属性,之后合并内容)
let person2 = {...person,name:'cc'}

react 咻咻咻_Test_22

# 3. class类中限制props属性数据类型

# 注意
props是只读的

react 咻咻咻_生命周期_23

# 4. 字符串类型ref

react 咻咻咻_html_24

# 5. 回调形式的ref (内联方式)

react 咻咻咻_html_25

# 6. createRef (最新写法)

react 咻咻咻_生命周期_26

# 7. 表单提交 (非受控组件)

react 咻咻咻_生命周期_27

# 8. 表单提交 (受控组件:用到state状态)

react 咻咻咻_Test_28

# 10. 高阶函数/函数柯里化

react 咻咻咻_Test_29

# 11. 组件生命周期 (挂载阶段)

react 咻咻咻_html_30

# 12. 生命周期

# 12.1. 旧版本 (16.8)

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

# 12.2. 新版本 (17.2)

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.getDerivedStateFromProps
3.render()
4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

# 小结
新版本去掉三个生命周期:componentWillMount、componentWillReceiveProps、componentWillUpdate
增加了三个生命周期:getDerivedStateFromProps、getDerivedStateFromProps、getSnapshotBeforeUpdate
# 13. 插件

# 13.1. 前端跨域代理 (正向代理)

# 13.2. 兄弟组件之前传值 (消息订阅与发布机制)

# 13.3. fetch/axios 数据请求 (fetch:关注分离原则)

# 13.4. SPA 单页面,多组件,局部刷新
# 14. react-router

# 概念

# 14.1. 什么是路由
1. 一个路由就是一个映射关系(key:value)
2. key为路径, value可能是function或component
3. function为后端路由,component为前端路由

# 14.2. 路由分类
1. 后端路由:
1) 理解: value是function, 用来处理客户端提交的请求。
2) 注册路由: router.get(path, function(req, res))
3) 工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2. 前端路由:
1) 浏览器端路由,value是component,用于展示页面内容。
2) 注册路由: <Route path="/test" component={Test}>
3) 工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件

# 14.3. 前端路由原理
前端路由依靠浏览器的历史记录history实现

# 14.4. react-router分类
1. web端使用 (react-router-dom)
2. native端使用
3. any任何都可以使用

# 14.5. 路由基本使用
1. 场景:点击左侧导航区,展示区内容切换
2. 导航区:<Link to="/xx">Demo</Link>
3. 展示区:<Route path="/xx" component={Demo} />
4. 主程序入口:<APP>最外层包裹一个<BrowserRouter>或<HashRouter>
15. 路由组件与一般组件的区别

react 咻咻咻_Test_31

# 16. NavLink使用

注意:<NavLink>是<Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数

小结:Navlink为link增加了几个渲染属性 (选中样式)

 

react 咻咻咻_html_32

# 17. 包装自定义组件 (MyNavLink组件)

react 咻咻咻_html_33

react 咻咻咻_生命周期_34

# 18. switch标签 (当查找到目标路由后立即结束匹配)

react 咻咻咻_html_35

# 19. 初始化默认路由选项

react 咻咻咻_生命周期_36

# 20. react-route嵌套路由

react 咻咻咻_Test_37

# 21. 向路由组件传递参数的三种方式

1. params参数
携带参数:<Link to='/demo/test/tom/18'>详情</Link>
声明接收:<Route path='/demo/test/:name/:age' component={Test}/>
接收参数:const {name,age} = this.props.match.params

2. search参数
携带参数:<Link to='/demo/test?name=tom&age=18'>详情</Link>
注册路由(无需声明,正常注册即可):<Route path='/demo/test' component={Test}/>
接受参数:const {search} = this.props.location.search
注意:search是unicode编码,需要借助querystring第三方工具包来解析

3. state参数
携带参数:<Link to={{path='/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path='/demo/test' component={Test}/>
接受参数:const {search} = this.props.location.state

react 咻咻咻_生命周期_38

 

  

标签:咻咻咻,render,react,state,props,组件,路由
From: https://blog.51cto.com/u_16021118/6140339

相关文章

  • dnd 咻咻咻
    #1.钩子函数APIuseDrag拖拽useDrop放置useDragLayer拖拽层#Drag拖拽import{useDrag}from'react-dnd'functionDrag(){const[{isDragging},drag,dragPrevi......
  • React 限制 Props 和 State 类型
    下面是Component的接口,P代表Props、S代表State。interfaceComponent<P={},S={},SS=any>extendsComponentLifecycle<P,S,SS>{}所以,在tsx中写两个......
  • vue/react关与key的面试题
    虚拟dom中key的作用当状态中的数据发生改变时,react会根据新数据生成新的虚拟dom,随后react进行新虚拟dom与旧虚拟dom的diff算法比较,比较规则如下:1.旧虚拟dom找到了与新......
  • 好客租房44-react组件基础综合案例-5发表评论-1
    发表评论1给按钮绑定点击事件2在事件处理程序中通过state获取评论信息3将评论信息添加到state中并调用setState()方法更新数据//导入reactimportReactfrom'react'imp......
  • 好客租房42-react组件基础综合案例-渲染列表无数据并优化
    渲染列表评论1判断列表数据的长度是否为02如果为0则渲染暂无评论//导入reactimportReactfrom'react'importReactDOMfrom'react-dom'//导入组件//约定1:类组件必......
  • 好客租房41-react组件基础综合案例-渲染列表数据
    1渲染列表在state定义数据进行数据渲染//导入reactimportReactfrom'react'importReactDOMfrom'react-dom'//导入组件//约定1:类组件必须以大写字母开头//约定2:......
  • swagger-ui-react 前端引用草稿
    前言SwaggerUI是一个React组件,它接受一个配置对象作为其唯一的属性。这个配置对象可以包含多个属性来自定义SwaggerUI的行为和外观。以下是SwaggerUI支持的主要属性及其说......
  • react的diff算法
    diff策略React用三大策略将O(n^3)复杂度转化为O(n)复杂度策略一(treediff):WebUI中DOM节点跨层级的移动操作特别少,可以忽略不计。策略二(componentdiff):拥有相......
  • [React] Flushing state updates synchronously with flushSync
    InReact,everyupdateissplitintwophases:During render, Reactcallsyourcomponentstofigureoutwhatshouldbeonthescreen.During commit, React......
  • #yyds干货盘点 【React工作记录二十七】moment处理日期格式
     目录​​前言​​​​导语​​​​解决思路​​​​总结​​前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五......