react使用总结

news/2024/2/29 3:20:07

最近学了一些 react 和es6 的一些知识,并且使用 react 写了一个 TodoList 项目===>预览 && 源码 感觉学的挺多的,并且遇到的坑也不少?,说实话,一开始学 react 看到 jsx 语法有点不适应,说好的结构和行为分离呢?,不过随着通过一个项目的完成,渐渐明白了这么写的好处

好处

  • 自定义标签
  • 结构清晰
  • 代码模块化
  • 更加语义化

不过也有缺点

  • 浏览器不支持这语法
  • 必须通过一大堆工具来转换

一些需要注意的点

1. react声明组件时,组件名称必须以大写字母开头如?:<Todo />
2. 每个标签必须闭合,因为采用的 js+xml 写法,如?: <input />
3. 组件的返回值只能有一个顶层元素,如?:

下面是错误的:

render () {return (<div>1</div><div>2</div>)
}

必须这样

render () {return (<div><div>1</div><div>2</div></div>)
}

4. return后面要加一个括号,目的是防止 JavaScript 代码在解析时自动在换行处添加分号:

     renderSquare(i) {return (<Todo />);}

5. render()里面不能写 class,for,而是要写成classNamehtmlFor,因为 class ,for 是 javascript 的关键字,因此不能使用,如

下面是错误的

<div class=“xxx”>

而是要写 className:

<div className="xxx">

6. 不要直接更新状态,如

 this.state.comment = 'Hello';

此代码不会重新渲染组件的,之前就这么写,啥反应也没有?,应该要用setState():?

 this.setState({comment: 'Hello'});

注意!!:构造函数(constructor)是唯一能够初始化 this.state 的地方。)

7. 使用style

我们在 html 可以这么写:

<div style="background-color:red;"></div>

但是在 jsx 里面却不能这么写,必须用两个花括号包裹,并且里面不能写-,要用驼峰形式写,如上面的 background-color写成backgroundColor:

<div style={{backgroundColor: 'red'}}></div>

8. 关于 setState

setState方法用于更新当前组件的state状态值,但调用这个方法后,state并不会立即更新,而是在render方法调用后才会更新

react 特点

  1. 虚拟DOM: React是以数据驱动的,每次数据变化React都会扫描整个虚拟DOM树,自动计算与上次虚拟DOM的差异变化,然后针对需要变化的部分进行实际的浏览器DOM更新。
  2. 组件化: React可以从功能角度划分,将UI分解成不同组件,各组件都独立封装,整个UI是由一个个小组件构成的一个大组件,每个组件只关系自身的逻辑,彼此独立(比如你有个按钮,很多页面都有这个按钮,那么就可以把这个按钮封装成该组件)。
  3. 单项数据流:React只有单向数据流动-从父节点传递到子节点

https://www.jiucaihua.cn/news/show-3861912.html

相关文章

OAF 常见概念介绍

因为OAF开发的适用面很窄&#xff0c;所以即使OAF开发采用的也是MVC设计模式&#xff0c;但是很多用语都没听过。随着OAF开发的深入学习&#xff0c;如果不熟悉很多专业用语&#xff0c;是很困难的。 此外&#xff0c;OAF开发中面向对象的重用&#xff0c;官方给出的洋葱图如下…

java命令主动清空jvm_JVM_常见命令

JVM参数1. 标准参数java -versionjava -help2. -X参数不常用-Xint 解释执行-Xcomp 第一次使用就编译成本地代码-Xmixed 混合模式&#xff0c;JVM自己来决定3. -XX参数(非常重要了)a . boolean 启用/禁用某个属性格式: -XX:[/-]例如使用GC收集器类型 :-XX: Use…

Http概述(一)

Http使用的是可靠的数据传输协议&#xff0c;因此即使数据来自地球的另一端&#xff0c;也能够确保数据在传输过程中不会被损坏或产生混乱。 这样用户在访问信息时就不用担心其完整性了。 web服务端与服务器是如何通信的 Web内容都是存储在web服务器上的&#xff0c;web服务器所…

Linux下PHP开发环境搭建(Apache2.4+PHP7.1+MySQL5.7)

为什么80%的码农都做不了架构师&#xff1f;>>> LAMP是当下非常热门的Web开发环境。很多开发者在搭建LAMP的过程中会遇到各种各样的问题&#xff0c;想到这些头都快爆炸了&#xff0c;今天特意抽出时间将PHP开发环境的搭建过程记录下来&#xff0c;以便供大家做个参…

java原生jdbc增删改查hive_CDH5.15.1 hive 连接mongodb配置及增删改查

db.student.insert({"name":"张三","age":"22","sex":"男","class":"计算机2班"});//如果数据库中不存在集合&#xff0c;就创建db.student.insert({"name":"李四",&quo…

放眼国际,阿里云将成AWS最有力竞争者?

本文讲的是放眼国际,阿里云将成AWS最有力竞争者?【IT168 评论】如今&#xff0c;“云计算”从被提出时抽象的概念发展到今天&#xff0c;已不再是单纯的供给计算能力&#xff0c;其已逐渐成为一个包含基础设施、运算平台乃至整套管理、软件解决方案的庞大体系。 当前&#xff…

java强软_java中的四大引用(强,软,弱,虚)

package com.shi.ref;import java.util.HashMap;import java.util.WeakHashMap;/*** 弱引用HashMap的使用* author shiye**结果&#xff1a;{1HashMap}{1HashMap}{1HashMap} 1********************{2WeakHashMap}{2WeakHashMap}{} 0*/public class TestWeakHashMap {public sta…

synchronized 方法对 非synchronized方法的影响

StringBuilder是线程不安全的类。 StringBuffer是线程安全的&#xff0c;因为它里面的方法加了synchronized。 今天写了一段代码测试了一下&#xff1a;用循环开启10个线程&#xff0c;调用StringBuffer&#xff08;StringBuilder&#xff09;的append追加1 到 10 。 结果预期一…

如何确定网页和查询的相关性

本文分为两部分 搜索关键词权重的科学度量TF-IDF利用python的工具包计算文本的TF-IDF1. 搜索关键词权重的科学度量TF-IDF 查询&#xff1a;原子能的应用 首先进行分词&#xff1a;原子能、的、应用 根据直觉知道&#xff1a;包含这三个词较多的网页比包含少的网页与我们的需求相…

华为升级版本、5720-FTP建立FTP服务器、升级AP版本。

设备型号&#xff1a;S5720-32C-HI-24S-AC设备版本&#xff1a;V200R011C00设备规格&#xff1a;5720-24个千兆SFP&#xff0c;8个复用的10/100/1000BASE-T以太网接口Combo&#xff0c;4个万兆SFP&#xff08;自适应GE&#xff09;&#xff0c;后插卡上的4个万兆SFP接口。设备升…