案例演示
案例演示本节内容根据官方文档的 教程 编写。 在线demo 案例代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175import React from 'react'import Reac...
高级指引
01.高级指引 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《React》笔记/02.高级指引/01.高级指引.md。原作者：xugaoyi。许可证：MIT。
State&生命周期
04. State & 生命周期State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件. State类似于vue中的data选项 将函数组件转换成 class 组件 在没有useState钩子函数之前，是通过class组件管理State ？ 12345678910class Clock extends React.Component { render() { return ( <div> <h1>Hello, world</h1> <h2>It is {this.props.date.toLocalTimeString()}</h2> </div> ) }} 每次组件更新时 render 方法都会被调用，但只要在相同的 DOM 节点中渲染 <Clock /> ，就仅有一个 Clock 组件的 class 实例被创建使用。这就使得我们可...
列表&Key
07. 列表 & Key如下代码，我们使用 map() 函数让数组中的每一项变双倍，然后我们得到了一个新的列表 doubled 并打印出来： 123const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled); 在 React 中，把数组转化为元素列表的过程是相似的。 渲染多个组件12345678910const numbers = [1,2,3]// 通过map方法将数值放入li，形成一个li标签组成的数值，在一次性放入ulconst listItems = numbers.map(number => { <li>{numbers}</li>})ReactDOM.render( <ul>{listItems}</ul> document.getElementById('root')...
元素渲染
02. 元素渲染元素是构成 React 应用的最小砖块，描述了你在屏幕上想看到的内容。 1const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。 将一个元素渲染为 DOM假设你的 HTML 文件某处有一个 <div>： 1<div id="root"></div> 根节点，React应用只有单一根DOM节点 但一个html页面可以有多个React应用，每个应用对应一个独立根节点。 12const el = <h1>Hello</h1>ReactDOM.render(el, document.getElementById('root')) 更新已渲染的元素React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。...
事件处理
05. 事件处理与传统HTML绑定事件的区别传统的 HTML： 123<button onclick="activateLasers()"> Activate Lasers</button> 在 React 中略微不同： 1234// 1.事件名为小驼峰； 2.传入函数以大括号包裹函数名形式<button onClick={activateLasers}> Activate Lasers</button> React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 阻止默认事件 (合成事件对象)在 React 中，你需要这样阻止默认事件： 123456789101112function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link ...
