主页 分类 关于

React 元素渲染

  1. 元素渲染
    1. 元素是构成 React 应用的最小单位 用于描述屏幕上输出的内容
      1. 更新元素渲染
      2. 用函数来表示

React笔记

元素渲染

元素是构成 React 应用的最小单位 用于描述屏幕上输出的内容

<!-- eact 的核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 提供与 DOM 相关的功能 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Babel 可以将 ES6 代码转为 ES5 代码 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<!-- 将元素渲染到 DOM 中 -->
<div id="example"></div>
<script type="text/babel">
// 要将React元素渲染到根DOM节点中 通过把它们都传递给 ReactDOM.render()的方法来将其渲染到页面上
const element =<h1>我叫史迪奇</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

更新元素渲染

<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>我叫史迪奇</h1>
      <h2>你已经浪费了的时间 {new Date().toLocaleTimeString()}秒</h2>
    </div>
  );
  // 当前更新界面的唯一办法
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);
</script>

</body>

用函数来表示

React 只会更新必要的部分

<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>我叫史迪奇</h1>
    // this当前对象
    <h2>现在是 {this.props.date.toLocaleTimeString()}你又在这浪费时间</h2>
    // <h2>现在是 {props.date.toLocaleTimeString()}你又在这浪费时间</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

setInterval(tick, 1000);
</script>

</body>









作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-Render-Elements.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议