摘要：
DOM Diff 算法的作用：实现最小化页面重绘， 判断哪片区域需要更新，哪片区域不需要更新，减少更新次数，提高效率 在这个效果中，可以看到， 在input中输入内容时，只会更新时间，不会更新输入框（否则内容就没了） 只会局部更新，这就体现了DOM Diff 算法的作用 原理图： 阅读全文
摘要：
需求: 自定义组件 1. 让指定的文本做显示/隐藏的渐变动画 2. 切换持续时间为2S 3. 点击按钮从界面中移除组件界面 第一步：初始化定义静态组件，并渲染组件标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF 阅读全文
摘要：
需求: 自定义包含表单的组件 1. 输入用户名密码后, 点击登陆提示输入信息 2. 不提交表单第一步：①初始化静态组件，并渲染组件标签， ②用户名的方式使用非受控组件的方式收集表单数据。 ③另外需要实现阻止表单提交的默认行为 1 <!DOCTYPE html> 2 <html lang="en"> 阅读全文
摘要：
需求：组件化实现此功能 1. 显示所有todo列表 2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本 第一步，定义组件并渲染静态组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v 阅读全文
摘要：
需求: 自定义组件, 功能说明如下: 1. 界面如页面所示 2. 点击按钮, 提示第一个输入框中的值 3. 当第2个输入框失去焦点时, 提示这个输入框中的值 第一步，初始化静态组件，并渲染组件标签 <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文
摘要：
需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 1). 如果性别没有指定, 默认为男 2). 如果年龄没有指定, 默认为18 第一步，定义组件标签并初始化显示组件标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char 阅读全文
摘要：
需求：自定义组件，功能说明如下 1，显示h2标题，初始文本为：你喜欢我 2，点击标题更新为：我喜欢你 第一步：初始化状态值并渲染组件标签 组件只有两种状态，“我喜欢你”和“你喜欢我”，因此只需要定义一个布尔变量，通过更新布尔变量的值，控制两种情况的渲染。 <!DOCTYPE html> <html 阅读全文
摘要：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit 阅读全文
摘要：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit 阅读全文
摘要：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit 阅读全文
摘要：
1，在页面中导入JS <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"> 阅读全文