react——入门

发表于 更新于 分类于
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”...

React起源与发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

当前版本：18.1.0

什么是React？

  • React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

react特点

JSX语法规则

JSX 是javaScript语法的扩展，如同tsx是typescript的扩展一样。

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。编译过程由Babel 的 JSX 编译器实现。

  1. 定义虚拟dom不要写引号
  2. 标签中混入JS表达式时要引用{}
  3. 样式的类名指定不要用class，要用className
  4. 内联样式，要用 style={{key:value}}
  5. 虚拟dom 必须只有一个根标签
  6. 标签必须闭合
  7. 标签首字母
    1. 若小写字母开头，则将该标签转成html中同名元素
    2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

React组件

1.函数式组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 1.创建函数式组件
  function Demo() {
    console.log(this)  // 此处的this是undefined 因为babel开启了严格模式
    return <h2>我是用函数定义的组件，适用于简单组件的定义</h2>
  }

  // 2.渲染组件到页面
  ReactDOM.render(<Demo/>,document.getElementById('test'))

</script>
</body>
</html>

2.类式组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 1.创建类式组件
  class MyComponent extends React.Component{
    render(){
      console.log(this)
      // render是放在哪里的 MyComponent的原型对象上，供实例使用
      return <h2>我是用类定义的组件，适用于复杂组件的定义</h2>
    }
  }

  // 2.渲染组件到页面
  ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

</body>
</html>