一、ReactDOM

1.1 render()

ReactDOM.render(element,container,[callback])

在container中渲染一个React元素,然后返回组件一个引用(对于stateless组件,返回null)。如果React元素已经加入到了container中,再次执行上面的方法会执行更新操作,只在必要时更新DOM来反映最新的React元素。如果提供可选的回调函数,则该callback会在组件渲染或者更新完后执行。

注意:

ReactDOM.render控制container节点的内容。container中任何现存的DOM元素会被覆盖。后续调用会执行React的DOM diff算法。

ReactDOM.render不会更改container节点,只是修改了他的子节点。插入一个组件到现存的DOM节点并且不更改其子节点也是有可能的。

ReactDOM.render目前的版本会返回一个根ReactComponent实例的引用。然而,应该避免使用这个返回值,因为未来的版本可能会异步渲染组件。如果你需要使用根ReactComponent实例引用,建议使用callback ref。

1.2 ummountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

从DOM中移除一个装载好的React组件,并且清理它的事件处理和state。如果container中没有装载组件,这个函数将什么都不做。如果组件成功移除就返回true,如果没有组件被移除就返回false.

1.3 findDOMNode()

ReactDOM.findDOMNode(component)

如果这个组件装载进了DOM,就返回相应的本地浏览器DOM元素。这个函数可以读取DOM值,比如form field 值,执行DOM方法。在大多数情况下,你可以给DOM节点添加ref属性,尽量避免使用findDOMNode。当render返回null或者false时,findDOMNode也返回null。

注意:

findDOMNode只能用在已经装载的组件上,如果你在一个还没装载的组件上调用这个函数会抛出异常;该函数不能用于函数型组件。

二、DOM Elements

在React中,所有的DOM属性包括事件处理函数都应该用驼峰命名。例外是aria-*和data-*属性,他们是小写字母。

下面是React不同于DOM的属性:

2.1 checked

checked属性用于input中类型为checkbox和radio的组件。可以使用这个属性来设置组件是否被选中。在创建controlled组件时是很有用的。defaultChecked是uncontrolled的等价物,当组件首次装载时设置组件是否被选中。

2.2 className

使用className属性,可以指定一个CSS类。这个属性可以用于所有的常规DOM和SVG元素比如div, a和其他的。

如果你在Web Component中使用React,就要使用class属性,而不是className;

2.3 dangerouslySetInnerHTML

dangerouslySetInnerHTML是React提出的用于代替DOM中innerHTML的方法。通常设置在代码中设置HTML是危险的,因为很可能导致XSS攻击。

在React中可以直接设置HTML,但是你必须用dangerouslySetInnerHTML并且传递一个对象,对象的键为_ _html,来提醒你自己这是很危险的,下面是例子:

function createMarkup() {
return {__html: 'First · Second'};
} function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}

2.4 htmlFor

因为for是保留字,因此用htmlFor来代替for的使用。

2.5 onChange

当表单域发生改变时,触发事件。

2.6 selected

selected属性用于option组件。你可以使用它来设置组件是否被选择。在构件controlled组件时很有用。

2.7 style

style属性接受一个JS对象,JS对象中的键是驼峰命名而不是CSS字符串。这样更有效,而且可以防止XSS安全漏洞。比如

const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
}; function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}

style不是自动补全前缀的,为了支持旧的浏览器,你需要提供相应的样式属性:

const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
}; function ComponentWithTransition() {
return <div style={divStyle}>This should work cross-browser</div>;
}

除了ms之外的厂商前缀都以大写字母开头,因此上面的WebkitTransition是大写的W。

2.8 value

input和textarea组件都支持value属性。你可以使用它来设置组件的value,可以用于构件一个controlled组件。defaultValue是uncontrolled等价物,在组件第一次装载时设置value值。

1. render()

-->

ReactDOM & DOM Elements的更多相关文章

  1. Adding DOM elements to document

    1.JavaScript 添加DOM Element 执行效率比较: 抄自:http://wildbit.com/blog/2006/11/21/javascript-optimization-add ...

  2. [Cypress] Create Aliases for DOM Elements in Cypress Tests

    We’ll often need to access the same DOM elements multiple times in one test. Your first instinct mig ...

  3. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  4. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  5. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  6. [TypeScript] Work with DOM Elements in TypeScript using Type Assertions

    The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going ...

  7. [Javascript] Create scrollable DOM elements with Greensock

    In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> ...

  8. [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)

    You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show c ...

  9. [Svelte 3] Use Svelte 3 transitions to gracefully show and hide DOM elements

    Most websites are quite static and adding some animations/transitions can improve the user experienc ...

随机推荐

  1. 使用Spring Data Redis时,遇到的几个问题

    需求: 1,保存一个key-value形式的结构到redis 2,把一个对象保存成hash形式的结构到redis 代码如下: // 保存key-value值         pushFrequency ...

  2. day36 11-Hibernate中的事务:当前线程中的session

    如果你没有同一个session开启事务的话,那它两是一个独立的事务.必须是同一个session才有效.它给我们提供一个本地线程的session.这个session就保证了你是同一个session.其实 ...

  3. 获取电脑名和IP地址

    private string  GetHostNameAndIP( bool  isv4Orv6)        {            string HostName = Dns.GetHostN ...

  4. Floyd算法模板--详解

    对于无权的图来说: 若从一顶点到另一顶点存在着一条路径,则称该路径长度为该路径上所经过的边的数目,它等于该路径上的顶点数减1. 由于从一顶点到另一顶点可能存在着多条路径,每条路径上所经过的边数可能不同 ...

  5. 【水滴石穿】react-native-ble-demo

    项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...

  6. JavaScript--结合CSS变形、缩放能拖拽的登录框

    上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  7. windows下MySQL 5.7.19版本sql_mode=only_full_group_by问题

    用到GROUP BY 语句查询时出现 which is not functionally dependent on columns in GROUP BY clause; this is incomp ...

  8. Directx教程(29) 简单的光照模型(8)

    原文:Directx教程(29) 简单的光照模型(8)      现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...

  9. jQuery圆盘抽奖

    在线演示 本地下载

  10. Codeforces 336C

    这题是大一暑假时候做的,当时没有出,直到今天突然觉得应该把没过的题目再做一边,不然真的是越积越多. 现在能够独立做出来真的是难以表达的兴奋,刚开始的时候就觉得 O(30 * 30 * n)的复杂度有点 ...