React学习（四）：元素渲染&组件

目录

一、React元素二、元素渲染到 DOM 中三、更新元素渲染四、 React组件五、 组件详解六、 复合组件

一、React元素

元素是构成 React 应用的最小单位，描述了你在屏幕上想看到的内容

const element = <h1>Hello, world!</h1>;

二、元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id=‘root’ 的<div>标签:

<div id='root'></div>

在此 <div>标签中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。 要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('root') );

三、更新元素渲染

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。 目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法，如下计时器例子：

function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000);

每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容

四、 React组件

组件是React的核心，组件分为函数组件与 class 组件 1、函数组件 写类似JavaScript 函数，它接受任意的入参（即 “props”），并返回 React 元素。

function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

2、class 组件 也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

3、函数组件转换成 class 组件

创建一个同名的 ES6 class，并且继承于 React.Component。添加一个空的 render() 方法。将函数体移动到render() 方法之中。在 render() 方法中使用 this.props 替换 props。删除剩余的空函数声明。

五、 组件详解

1、自定义组件 之前遇到的React 元素都只是使用DOM 标签：

const element = <h1>Hello, world!</h1>;

现在React 元素也可以是用户自定义的组件：

const element = <Welcome name="world!" />;

2、实例 React自定义的组件：如果需要向组件传递参数，可以使用 this.props 对象，实例如下

function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="world!" />; ReactDOM.render( element, document.getElementById('root') );

3、回顾实例发生了什么？

我们调用 ReactDOM.render() 函数，并传入 作为参数。React 调用 Welcome 组件，并将 {name: ‘world!’} 作为 props 传入。Welcome 组件将<h1>Hello, world!</h1>元素作为返回值。React DOM 将 DOM 高效地更新为<h1>Hello, world!</h1>。

4、组件名称必须以大写字母开头 HTML 元素名以小写字母开头（如<div />），而自定义的 React 组件名以大写字母开头（如<Welcome />）

六、 复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

function UserName(props) { return <h1>你的名称：{props.name}</h1>; } function UserAge(props) { return <h1>你的年龄：{props.age}</h1>; } function UserMessage() { return ( <div> <UserName name="Allen" /> <UserAge age="12" /> </div> ); } ReactDOM.render( <UserMessage />, document.getElementById('root') );

········································································································································· 本文介绍React元素渲染和组件~~请大家多多指教，能get到知识点不要忘了关注点个赞~。