普通网友-CSDN博客

原创 Refs

put; var inputValue = input.value; var inputRect = input.getBoundingClientRect(); 完整实例你可以通过使用 this 来获取当前 React 组件，或使用 ref 来获取组件的引用，实例如下： React 实例 class MyComponent extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.foc.

2021-01-27 13:22:06 108

原创组件

React 组件 API 在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法: 设置状态：setState 替换状态：replaceState 设置属性：setProps 替换属性：replaceProps 强制更新：forceUpdate 获取DOM节点：findDOMNode 判断组件挂载状态：isMounted 设置状态:setState setState(object nextState[, function callback]) 参数说明 nextSta

2021-01-27 13:21:35 63

原创 Keys

React 列表 & Keys 我们可以使用JavaScript 的 map() 方法来创建列表。 React 实例使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => <li>{numbers}</li> ); ReactDOM.render( <ul>{listItems}&lt.

2021-01-27 13:21:01 96

原创 Props

React Props state 和 props 主要的区别在于props是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。使用 Props 以下实例演示了如何在组件中使用 props： React 实例 function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const ..

2021-01-27 13:20:31 88

原创 JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。我们先看下以下代码： const element = <h1>Hello, world!</h1>; 这种看起

2021-01-27 13:20:01 63

原创 React

React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 特点 1.声明式设计−React采用声明范式，可以轻松描述应用。 2.高效−React通过对D..

2021-01-27 13:19:14 36

原创节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。 DOM Nodes DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点 HTML DOM 节点树 HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树： HTML DOM 树实例节点父、子和同胞节点树中

2021-01-27 13:18:34 188

原创 DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 HTML DOM 定义了访问和操作 HTML 文档的标准方法。 DOM 以树结构表达 HTML 文档。 HTML DOM 树形结构: HTML DOM 实例学习 100 个实例！使用我们的编辑器，你可以编辑 HTML 文档，然后单击 "尝试一下" 按钮来查看结果。在线实例! HTML DOM 实例点击灯泡开/关灯 ...

2021-01-27 13:17:58 40