react初体验

发表于 | 分类于

前言

在我的日常开发中，我用的只有vue，对于大名鼎鼎的react和angular，我一点都不了解。想当初开始学框架时，纠结许久，无非是react更具挑战性，学会了再学vue更容易，而vue简单易上手且功能也不输react。当然这些都是从度娘听说的。

使用vue许久，感觉还是很爽的，虽然开始时有点困难，毕竟那时es6也不熟悉。我不止一次庆幸我学的是vue，不仅是因为它易学易用，关键是它的生态也越来越好，国内很多新东西出来，都是先基于vue的，比如现在很火的mpvue小程序框架，就是基于vue的，这使得我学会一个vue就可以容易地做很多事。

之所以有庆幸学的是vue的心态，可能也是因为不了解其他两大框架，先入为主地觉得vue才是王道。我不知道其他两个框架是否很难入手，是否更加强大，但是vue已经能够解决我的日常开发了，我本来也不想去接触react和angular的，可能觉得舍易求难是浪费时间。不过另一方面，我又很好奇，它们真的那么难吗？和vue比到底有什么区别？思来想去，我觉得还是直接试水比较好，不就是一个框架吗？想学就学咯！于是，我选择了react，因为angula似乎真的难点！

hello world

当初学vue时，我只要引入一个文件vue.js就好了，学react，我竟然要引入三个文件，天啊，我第一想法就是这个好复杂啊。

  • react.js：实现React核心逻辑，且于具体的渲染引擎无关，从而可以跨平台公用。
  • react-dom.js：包含了具体的DOM渲染更新逻辑，以及服务端渲染的逻辑，与浏览器相关。
  • browser.js：支持JSX语法必须。

在这里，我用的react是15.6.2版本，听说稳定点，browser.js是5.8.38版本，莫名不敢用新的，哈哈~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
        <div id="app"></div>

        <script src="./common/react.js"></script>
        <script src="./common/react-dom.js"></script>
        <script src="./common/browser.js"></script>

        <script type="text/babel">
          ReactDOM.render(
              <h1>hello world</h1>,
              document.getElementById('app')
          )
        </script>
</body>

注意：script标签的type属性应写成text/babel，不然识别不了react语法

上面代码是截取body部分，此时已经可以在浏览器里输出hello world了。虽然这段代码看起来很简单，但是我开始写时，我是恐慌的，因为ReactDOM.render()看起来很复杂的样子，为啥不是vue那样，直接两个花括号写到html里呢，那样多简单。

确实很容易受vue影响，对于这种方法有点接受不了，但这其实并不复杂。ReactDOM.render()的第一参数很明显就是我们要输出到浏览器的内容，那么第二个参数其实是要输出到的位置。

当我们明白两个参数的意义时，可能觉得懂了，其实不然。这里面可是有一个核心的东西，那就是JSX。在我还没接触JSX，总是听别人说JSX时，我觉得它可能是一个很复杂的语法。但当我接触后才知道，这货很“纯”，是一个奇怪的变量：

1
var ele = <h1>hello world</h1>

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML，它就是JSX。那么不禁想问，它到底是什么数据类型？

1
2
3
console.log(typeof ele)

//object

显然，它是一个对象，这么看的话，JavaScript是在内部给它处理了。事实也确实如此：

1
2
3
4
5
6
7
8
9
10
ReactDOM.render(
    React.createElement('h1',null,'hello world'),
    document.getElementById('app')
)


ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('app')
)

上面两种方法结果完全相同。React.createElement()的第一个参数是标签，第二个参数是标签属性，第三个参数是标签内容。很显然这样写比较繁琐，且不直观。所以我们应该直接使用JSX语法，这也是官方建议的。

其实我们直接写JSX语法，Babel 转译器也会把 JSX 转换成为 React.createElement() 方法的调用，而这个方法会返回一个对象，类似这样：

1
2
3
4
5
6
{
  type: 'h1',
  props: {
    children: 'Hello, world'
  }
}

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

关于JSX还有两点需要注意：

  1. 当有多个标签时，在最外层需加上一个包裹标签，例如：

    1
    const ele = <div><span></span><p></p></div>

  2. JSX允许自由分段

    1
    2
    3
    4
    const ele = <div>
                  <span></span>
                  <p></p>
                </div>

总结

在react里使用ReactDOM.render()来向页面渲染内容，它有两个参数，第一个参数是渲染内容，第二个参数是渲染位置。

JSX是JavaScript的一种扩展语法，让一个变量直接赋值为标签。它与React.createElement()方法调用的结果是一样的，返回一个对象，叫做“React元素”。react推荐使用JSX语法。

啰嗦一大堆，其实是表达自己的心情，初见react让我觉得复杂不好用，但是越接触越发现它是有它独特的魅力的。不管哪一个框架，我们都没资格去评定好不好，只有适不适合自己。