从零开始react入门（一）

作为一个稍微有点基础的人吧，思来想去如何开始学习react呢，最终觉得还是选择权威，简单即有效，直接奔官网，讲真确实直接get started，英文水平不错的推荐直接英文，如果英文差一点也可以去中文翻译官网。

如果读者还没搭好react开发环境，可以参考我的另一篇博客—快速搭建简单环境。

这里我也就是用官网的例子，讲一下自己的理解和体会，有不对敬请指出。

简单谈一下jsx

const element = <h1>Hello, world!</h1>;

说实话，我第一次看还没反应过来有什么不对，默认以为是字符串，不过回过神发现没有引号。。

这个不是字符串也不是html的东西就是jsx，一种js的语法扩展，是一种极富表现力的UI展示方式，比模板还要直观可复用，却拥有js的全部功能。

其本质上跟模板是一样的，就是提取出UI中不变的部分写死，而变化的部分动态化、数据化。

1. jsx和vue的template一样可以直接使用大量js的语法，只是jsx更加贴近js
2. 个人认为功能更加强大，其本质是React.createElement(component, props, …children)的语法糖。

官网上提到具体有如下特性：

1. 可以嵌入表达式

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

简单解释下，定义一个formatName格式化数据的函数，定义user数据，定义jsx形式的element，其中像es6语法字符串模板一样，嵌入了变量部分{formatName(user)}，{}里面是进行的是格式化数据函数调用，在后面的ReactDOM.render解析中，formatName(user)将被解析为’Harper Perez’，最后得到的就是

<h1>
   Hello, Harper Perez!
</h1>

另外，官网提到，将上面的jsx分为三行是为了方便阅读，同时建议将多行jsx用()包裹起来来避免自动分号插入的陷阱。

2. jsx也是表达式

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

不多解释，jsx在编译后就会变成js对象，同时可以把jsx看为变量，那么变量能做的其实jsx应该也都可以。

3. jsx的指定属性

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

基本就这两种形式，第一种是普通的属性定义，其中没有涉及表达式和变量，第二种则是表达式形式，里面是变量等，特别注意的是，在{}里面如果用引号则代表字符串。

4. jsx中的子元素声明

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

注意下，jsx相对于html更加贴近javascript，所以其react DOM属性采用驼峰命名，所以定义html属性都会相应变化，如class我们应该写为className。

5.在jsx中可以直接使用用户输入，不用对xss做处理

6.Babel 转义器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

下面两段代码是完全相同的

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

最终react将其处理为

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

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

实战

基本介绍完jsx，下面用一个clock实例入门一下。

clock

根据之前的jsx内容，我们很容易得出思路，先写UI，然后调用ReactDom.render()

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

这里我们使用定时器，每一秒刷新一次root元素里的DOM，但其实react中使用了virtual dom，virtual dom其实就是类似上面react dom的东西，每次jsx中存在状态变化时，我们的代码会通知react进行UI更改，react会根据新状态生成新virtual dom，然后对新旧virtual dom进行对比，找出状态变化更新UI的最小代价，最后才进行DOM操作。

上面不理解也没关系，总之，react有自己的DOM更新机制，所以我们每次进行setInterval，重新创建jsx、重新全部渲染root元素中的DOM，这其实是比较低效的，再看下面只进行h2标签更新的代码

class Clock extends React.Component {
    constructor(props){
        super(props)
        this.state = {date: new Date()}
    }
    componentDidMount(){
        this.timerId = setInterval(
            () => this.tick(),
            1000
        )
    }
    tick(){
        this.setState(
            (prevState, props) => ({
                date: new Date(prevState.date.getTime() + 1000)
            })
        )
    }
    componentWillUnmount(){
        clearInterval(this.timerId)
    }
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>it is { this.state.date.toLocaleTimeString() }</h2>
            </div>
        )
    }
}

这里使用了class写法，代码没太多变化，整体来看我们只是将定时器放到了react生命周期，同时将数据变化托管给react，react自己进行最小代价的代码更新，有两个关键点：

1. 在组件创建的时候设置定时器，每一秒改变一次时间
2. 关键在tick函数，每秒调用setState，通知react数据变化

Toggle

实现一个按钮，点击一次为on，再次点击为off，循环反复，主要体会一下在jsx中直接使用事件绑定

class Toggle extends React.Component {
    constructor(props){
        super(props);
        this.state = {isToggleOn: true}

        this.handClick = this.handClick.bind(this)
    }

    handClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }))
    }

    render(){
        return (
            <button onClick={this.handClick}>
                {this.state.isToggleOn ? "on" : "off"}
            </button>
        )
    }
}

设置好初始state，在jsx中点击事件绑定handclick函数，handclick则会改变state通知react改变DOM