高级指引 | Barry's Blog

2021-03-24

列表&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')...

2021-03-27

案例演示

案例演示本节内容根据官方文档的教程编写。在线demo 案例代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175import React from 'react'import Reac...

2021-03-24

事件处理

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 ...

2021-03-24

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 实例被创建使用。这就使得我们可...

2021-03-24

元素渲染

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。...

01.高级指引