小白教程
所有教程
关于
Search
172.70.178.73
172.70.178.73
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“React 元素渲染”的源代码
本页内容
上一节:
React_安装
下一节:
React_JSX
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:React 元素渲染}}[[Category:React 教程|3]] = React 元素渲染 = 元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。 <pre>const element = <h1>Hello, world!</h1>;</pre> 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 === 将元素渲染到 DOM 中 === 首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>: <pre><div id="example"></div></pre> 在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 "根" DOM 节点。 我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。 要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上: <sample title="" desc="" lang="html" hererun="1"> const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('example') ); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> const element =<h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('example') ); </script> </body> </html> </run> === 更新元素渲染 === React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。 目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法: 来看一下这个计时器的例子: <sample title="" desc="" lang="html" hererun="1"> function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>现在是 {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('example') ); } setInterval(tick, 1000); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>现在是 {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('example') ); } setInterval(tick, 1000); </script> </body> </html> </run> 以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。 我们可以将要展示的部分封装起来,以下实例用一个函数来表示: <sample title="" desc="" lang="html" hererun="1"> function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example') ); } setInterval(tick, 1000); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example') ); } setInterval(tick, 1000); </script> </body> </html> </run> 除了函数外我们还可以创建一个 React.Component 的 ES6 类,该类封装了要展示的元素,需要注意的是在 render() 方法中,需要使用 this.props 替换 props: <sample title="" desc="" lang="html" hererun="1"> class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example') ); } setInterval(tick, 1000); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example') ); } setInterval(tick, 1000); </script> </body> </html> </run> <blockquote>'''React 只会更新必要的部分''' 值得注意的是 React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。 </blockquote>
返回至“
React 元素渲染
”。
上一节:
React_安装
下一节:
React_JSX