- 博客(6)
- 收藏
- 关注
原创 React中关于props的特点
1、可以给组件传递任意类型的数据。通过前面的案例,我们给组件传递了字符串和数值类型的数据。(注意:age={18}这种传递的方式为数值类型,如果是age='18'这种传递的方式为字符串类型)在向类组件传递数据的时候,采用了如下的代码ReactDom.render(<ShowMessage name={'zhangsan'} age={18} />,document.getElementById('root'))对应的,可以在类组件中将传递过来的数据进行输出打印class
2021-11-18 17:54:03
811
原创 React中关于props基本的使用
在前面的课程中,我们讲解过一个页面可以有不同的组件组合而成,而这些组件之间是需要进行数据的共享的,这就用到了组件之间的进行通信。组件之间是封闭的,要接收外部数据应该用props来完成,props的作用就是接收传递给组件的数据。这里,先讲解props的应用,后面再详细的讲解组件通信的内容。下面先来看一下“函数组件”怎样接收数据。import React from 'react'function ShowMessage(props) { return(<div> .
2021-11-18 12:26:57
915
原创 React表单处理
在React中关于表单分为两部分内容,受控组件和非受控组件。4.7.1 受控组件我们知道,在HTML中的表单元素是可以输入数据的(也可以进行删除),也就是有自己的可变状态。例如文本框,可以在文本框中输入内容,也可以进行删除,而输入的内容我们可以称之为可变的状态。而这个状态是有HTML表单元素自己维护的。但是在React中,我们知道可变的状态通常保存在state中,并且只能通过setState方法来进行修改。这时与HTML中的表单元素在状态的维护上产生了冲突。为了解决这个冲突,React将st
2021-11-18 12:16:20
999
原创 有状态组件和无状态组件
所谓的有状态组件:指的是用类创建的组件。所谓的无状态组件:指的是用函数创建的组件。通过这个名称,可以发现函数组件与类组件的区别就是在状态上,那么状态指的就是数据。所以说函数组件,没有自己的状态,它只负责数据的展示,也就是该组件时静态的,也就是说,如果数据没有任何的变化(不需要与用户进行交互),仅仅就是为了展示,那么使用函数组件就可以了。而类组件是有自己的状态,它负责数据的更新变化,也就是负责更新页面,让页面‘动’起来。假如用户执行了某个操作,导致了数据发生了变化,那么这时就用类组件。如下
2021-11-18 10:39:42
2210
原创 React组件基本应用
4.1 组件简介 组件是React的一等公民,使用React就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点:可复用、独立、可组合 组件是React的一等公民,使用React就是在用组件,组件表示页面中的部分功能(包含自己的逻辑与样式),可以组合多个组件实现完整的页面功能。例如上面的图:整个页面可以划分为多个组件,橙色:的是整个示例应用的整体 ,蓝色:的是接受所有的用户输入绿色:展示数据内容并根据用户输入筛选结果.
2021-11-17 19:37:24
770
原创 JSX使用
3.1 JSX的概述JSX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率3.2 为什么在脚手架中可以使用JSX语法 JSX 不是标准的ECMAScript语法,它是ECMAScript的语法拓展 需要使用babel编译处理后,才能在浏览器环境中使用 create-react-app脚手架中已经默认有该配置,无需手动配置 编译JSX语法的包:
2021-11-17 19:24:57
962
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人