菜鸟教程 -- 学的不仅是技术,更是梦想!

React 教程

React 教程 React 简介 React 安装(NPM) React 安装(Vite) React 安装(CDN) React VSCode React Qoder React 在线生成 React 创建第一个项目 React 项目说明 React 元素渲染 React JSX React 组件 React 组件状态 React Props React 事件处理 React 条件渲染 React 列表 & Keys React 组件 API React 组件生命周期 React AJAX React 表单与事件 React Refs React 条件判断 React 路由 React Memo React CSS React Sass React Tailwind CSS React Hooks React 参考手册 React 测验

React 实战项目

React 博客项目 JSX 渲染文章列表响应式数据拆分组件路由跳转副作用与数据请求 useEffect 进阶自定义 Hook 全局状态打包上线

React Refs

React 事件处理

(追記) (追記ここまで)

React 元素渲染

在 React 18 中,元素渲染与之前的版本有一些变化,特别是在使用 ReactDOM.createRoot 和新的并发特性方面。下面是一个详细的示例和解释,展示如何在 React 18 中渲染元素。

实例

import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建一个简单的 React 组件
function App() {
return <h1>Hello, React 18!</h1>;
}

// 获取 id 为 "example" 的 DOM 容器,并创建一个 React 根节点
const root = ReactDOM.createRoot(document.getElementById("example"));

// 渲染 React 组件到 DOM 中的根节点
root.render(<App />);

React 元素是构建 React 应用的最小单元,它描述了你希望在屏幕上看到的内容。React 元素是不可变对象,一旦创建就不能更改。

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

与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>:

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 "根" DOM 节点。

我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。

要将 React 元素渲染到根DOM节点中,我们通过把它们都传递给 root.render() 的方法来将其渲染到页面上:

实例

// 创建一个 React 元素constelement =<h1>Hello, world!</h1>; // 获取 DOM 容器并创建根节点constroot = ReactDOM.createRoot(document.getElementById("example")); // 渲染 React 元素到 DOM 中的根节点root.render(element);

尝试一下 »

root.render 方法将 element 渲染到之前创建的根节点中,这样 element 就会显示在 id 为 "example" 的 DOM 元素内。

更新元素渲染

React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法:

来看一下这个计时器的例子:

实例

constroot = ReactDOM.createRoot(document.getElementById("example")); functiontick(){constelement = ( <div> <h1>Hello, world!</h1> <h2>现在是 {newDate().toLocaleTimeString()}.</h2> </div> ); root.render(element); }setInterval(tick, 1000);

尝试一下 »

以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。

我们可以将要展示的部分封装起来,以下实例用一个函数来表示:

实例

functionClock(props){return( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2> </div> ); }functiontick(){constroot = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clockdate={newDate()} /> ); }setInterval(tick, 1);

尝试一下 »

除了函数外我们还可以创建一个 React.Component 的 ES6 类,该类封装了要展示的元素,需要注意的是在 render() 方法中,需要使用 this.props 替换 props:

实例

classClockextendsReact.Component{render(){return( <div> <h1>Hello, world!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> </div> ); }}functiontick(){constroot = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clockdate={newDate()} /> ); }setInterval(tick, 1);

尝试一下 »

React 只会更新必要的部分

值得注意的是 React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。

AI 思考中...

React Refs

React 事件处理

1 篇笔记写笔记

小行星

227***[email protected]

522

改版写法:

1. 使用 ES6 类写法,用 this.props.属性名 来取值。
2. 可以多层 props 来传值,在 ReactDOM.render 定义属性值,传给调用方法 App,再在调用的ES6类调用中用 props.属性直接赋值过去。

var myStyle = {color:'red',textAlign:'center'}
class Name extends React.Component {
 render() {
 return <h1 style={myStyle}>网站名称:{this.props.name}</h1>;
 }
}
class Url extends React.Component {
 render() {
 return <h1>网站地址:{this.props.url}</h1>;
 }
}
class Nickname extends React.Component {
 render() {
 return <h1>网站地址:{this.props.nickname}</h1>;
 }
}
function App(props) {
 return (
 <div>
 <Name name={props.name}/>
 <Url url={props.url}/>
 <Nickname nickname={props.nickname}/>
 </div>
 );
}

多个属性的传入注意不用逗号或分号隔开而是空格符隔开:

ReactDOM.render(
 <App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
 document.getElementById('example')
);

小行星

227***[email protected]

7年前 (2019年03月12日)

菜鸟教程 -- 学的不仅是技术,更是梦想!

React 实战项目

React 元素渲染

实例

将元素渲染到 DOM 中

实例

更新元素渲染

实例

实例

实例

1 篇笔记 写笔记

点我分享笔记

1 篇笔记写笔记