React学习分享（一）

写这篇文章的主要目的是为了加强自己的记忆，也给别的同事一个快速入门的教程。

如果你觉得下载React环境比较麻烦，那么你可以直接打开CodePen,在这个页面直接进行demo的练习可以很直观的看到效果。

简单示例

介绍什么的就不说了，百度一搜一大堆，我们直接进入正题。
先来一个最简单的演示：

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

这段代码就会在页面上打出“Hello，world!”，自己可以在上文介绍的链接中试一试。

JSX

这里先介绍一下jsx，看名字很唬人，其实就是html和js的结合显示，其实看起来有点像模板语言，例如freemarker、thymeleaf等，具体怎么编译和解析它，我们不用去关心，有专门的解析器(babel ...)去做这个事。

 const element = 
Hello, world!
;

---

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

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

const element = (
  

    Hello, {formatName(user)}!
  
);

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

上面的“element”都符合jsx，并且jsx也可以给属性赋值：

const element = 
;
const element = ;

使用双引号或者大括号均可赋值，但是不能一起使用。
并且在被赋值的属性一定是遵循驼峰命名法的例如上例中的“tabIndex”在html中是“tabindex”。

如果标签中没有内容形如<……><……/>可以直接写为，例如：

const element = ;

JSX也支持标签拥有子类，例如：

const element = (
  

    
Hello!
    
Good to see you here.
  
);

并且，JSX能够有效的防止注入攻击，默认情况下，在呈现之前，DOM会转义嵌入在JSX中的任何值。因此，它可以确保永远不会注入在应用程序中没有显式编写的任何内容。在呈现之前，所有的内容都转换为字符串。

在React中我们会大量的使用JSX和ES6语法，希望正在读这篇文章的各位有这个基础，关于ES6的学习，这里介绍ES6标准入门（第三版 阮一峰 著）。
当然，希望大家能去买正版的书，毕竟是人家的劳动成果。

元素

元素（element）是React应用中最小的构建块。和浏览器DOM的element相比，React的element就是一个简单的对象，创建的代价相当低，由React DOM负责将React elements匹配到对应的DOM节点。

注意：不要将元素（element）和组件（component）的概念混淆。

将元素渲染到DOM

首先，得创建一个接收节点：

在设计这个地方要显示什么内容的时候，要先考虑最终以什么样的方式呈现内容，因为一般只有一个root节点。
通过调用 ReactDOM.render() 将React element渲染到root DOM 节点：

const element = 
Hello, world
;
ReactDOM.render(
  element,
  document.getElementById('root')
);

你可以在CodePen中尝试一下。

更新元素

React element 一旦创建就是不可变的，你不能改变他的属性或是其他任何东西。如果你想要动态的改变页面的显示，那么最适合的方式就是重新创建一个element（如果名字相同，只会更新要修改的那一句，相当高效）并调用ReactDOM.render()，举个栗子 ^ _ ^：

function tick() {
  const element = (
    

      
Hello, world!
      

        It is{' '}
        {new Date().toLocaleTimeString()}.
      
    
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);
//你可以用浏览器调试工具监控这段代码的刷新情况，会有更深的印象。

好的，先写这么多。如果对你的学习有用，请关注我~~