React基础

最新推荐文章于 2024-08-22 15:11:22 发布

exialym

最新推荐文章于 2024-08-22 15:11:22 发布

阅读量2k

点赞数

分类专栏： React 文章标签： React 组件状态 Dom-diff 虚拟Dom

本文链接：https://blog.csdn.net/exialym/article/details/52884589

版权

本文介绍了React的基础知识，包括ReactDOM.render()、JSX语法、组件创建、this.props.children的使用、PropTypes验证、获取真实DOM节点的方法、this.state的状态管理以及组件的生命周期。同时讲解了表单处理和如何利用生命周期方法进行Ajax数据请求。

摘要由CSDN通过智能技术生成

HTML模板

React主要是两个库：
react.js是核心库
react-dom.js 是提供与 DOM 相关的功能
还有一个Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，JSX是可以将HTML直接写在JS里的语言，这一步通常不在浏览器端进行，而是通过babel配合React的babel插件预先转码好。

$ babel src --out-dir build

不过这里我们为了方便就直接将其引入在浏览器端转码。
于是一个模板就像是这个样子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>

    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="../../build/browser.min.js"></script>
    <script type="text/babel">
      //our React code
    </script>
  </body>
</html>

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

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

JSX 语法

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法。
到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

var names = ['Lion', 'and', 'Rabbit'];
ReactDOM.render(
  <div>
    <div>This is {
      names.reduce((a,b)=>a+' '+b,'')
    }!</div>
  </div>,
  document.getElementById('render2')
);

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员：

var food = [
  <span>福萝卜 </span>,
  <span>牛肉 </span>,
];
ReactDOM.render(
  <div>We like to eat:{food}</div>,
  document.getElementById('render3')
);

这里React会给出一个警告，说Each child in an array or iterator should have a unique “key” prop。
这个警告和React的Dom diff算法相关。给遍历生成的Dom节点添加key就使得React在生成虚拟Dom树时可以记录下你的操作，在对这部分节点进行实际DOM更新时，通过这个key可以对比原有的节点和新的节点，进行代价最小的插入和删除而不必更新整个Dom组。
这里的key最好不是数组的下标这类的数据，而是和本Dom节点相关的Unique字符串。最次的选择是下标，那么我们修改一下上面的代码：