![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 59
react学习笔记
Aziel~
每天前进30公里
展开
-
7.React组件状态
文章目录一、组件状态二、状态初始化三、状态的变化四、组件的数据来源五、案例解析一、组件状态什么是组件状态?组件状态是指组件可以自行维护的数据。组件状态仅在类组件中有效。状态本质上是类组件的一个属性,一个对象。二、状态初始化在类组件的构造函数中添加state,状态是必须要初始化的,否则为undefined。constructor(props){ super(props); this.state = { n:this.props原创 2021-07-24 00:17:44 · 212 阅读 · 0 评论 -
6.显示学生列表[demo]
显示学生列表[demo]这篇博客主要是对React组件相关知识的一个总结。思路:先考虑Student组件怎么写,再考虑一个StudentList组件应该如何用Student组件完成,其中关键之处是组件属性的使用。一、需求通过接口拿到学生列表数据,并将其渲染到页面上。// src/components/Student.jsimport React from "react";export default function Student(props) { // 传入一个学生的相关信息,原创 2021-07-23 00:42:46 · 289 阅读 · 2 评论 -
5.React组件和组件属性
一、组件1.1 函数式组件特点必须返回react元素1.2 类组件1.3 特别注意组件首字母要大写,为什么?首字母大写,系统会认为这是一个组件,首字母小写,系统会认为你要创建一个html元素。// 正常组件的使用方式function MyFuncComp(){ return <h1>组件内容</h1>}React.render(<div> <MyFuncComp/></div>,docu,document.原创 2021-07-21 23:09:37 · 199 阅读 · 1 评论 -
4.图片切换[demo]
这篇博客是对前面学过的知识的一个总结和运用。一、需求让图片每隔两秒钟切换一次。鼠标悬浮,图片停止切换。#root { width: 520px; height: 280px; border: 2px solid; margin: 0 auto;}#root img { width: 100%; height: 100%; display: block;}// react无侵入性 所以我们可以用原生js的方式注册事件impo.原创 2021-07-09 13:19:37 · 126 阅读 · 0 评论 -
3.JSX
一、什么是JSXJSX是由Facebook公司起草的JS扩展语法。JSX会被babel编译,最终会被转化成React.createElement,所以JSX本质上是一个JS对象(React对象)。二、JSX特点每个JSX表达式有且仅有一个根节点,如果jsx表达式有多个子元素,那么必须要添加一个根节点,此时有两种添加方式。...原创 2021-07-08 22:46:50 · 128 阅读 · 0 评论 -
2.用React写一个Hello World!
写一个Hello Word!原创 2021-07-07 00:05:33 · 533 阅读 · 2 评论 -
1.React 简介
一、什么是reactFacebook研发 解决UI复杂度的 JavaScript库React不是框架框架显著特点 侵入性 改变开发代码的方式二、React特点轻量:React开发版所有源码(包含注释)仅300多行原生:所有React代码都是用原生JS书写而成,不依赖其他任何库易扩展:React对代码封装程度较低,也没有过多的使用魔法,所以React中的很多功能都可以扩展不依赖宿主环境:渐进式:单向数据流:用JS代码声明界面组件化三、学习路径整体原则:熟悉API --&g原创 2021-07-03 16:19:52 · 286 阅读 · 0 评论