react 之旅

148 阅读2分钟

react 的what,when, where

react是一个用来构建用户界面的javascript库,起源于Facebook内部,2013年5月开源,目前最新的版本是v16.6.0,最大的亮点是JSX,return里的内容看起来就像html

class Header extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

注意:由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

react已经是个发展了些年的青壮年了,可以与市面上很多库或者框架配合一起用。在react中经常提到的是一个组件的概念,一般我们把一些常用到的代码片段抽象出来,提高代码的复用。

它的发展历史可以在github上追溯到。

如果对作者的设计思想有兴趣,可以直接看看这个

使用

比较古老的方法是,在Html里引入两个库JS,然后通过render方法渲染页面

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> // React的核心库,用于创建UI
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> // 提供与DOM相关的功能。用于将创建的UI渲染到浏览器中

如果不用JSX,是这样的

const e = React.createElement;
// Display a "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

如果使用JSX,则需要再引一个JS库

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

接下来在业务逻辑的script标签中加上type="text/babel",然后就可以用JSX语法了

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

这种应用方式不得不说太简单了,一般来说,会配合webpack,es6,redux一起使用,详细可以参考这个教程

一些杂七杂八的工具

  • react-tools
    从开源时就有的工具,npm -g安装了之后就可以运行命令把jsx编译成js

      jsx --watch src/ build/
    
  • react-native-debugger / react-devtools
    表面上看都是调试器,可以调试react & react native,一个是黑色的,一个是白色的,建议还是装个react-native-debugger,因为react-devtools有某些依赖很难解决

  • redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理,大小大概是2KB

  • React Developer Tools / Redux DevTools
    这两个都是浏览器插件,redux就是保存一些组件之间通信相关state的。

面试常考点

  1. 为啥组件名是大写的?
    为了跟html标签区别开,因为render函数里的jsx也可以return像h1、h2这样的标签

     render() {
         return (
           <div>
             <Clock />
             <h1>Hello, world!</h1>
             <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
           </div>
         );
       }