React简要必备知识点

2016-12-03

React入门

React的入门文章一大堆,我也就不絮絮叨叨的讲了，请参考阮一峰React系列的文章本文只对一些教程中没有提到的，忽略了初学者的困惑的技术点进行补充。

正确理解JSX

在React的文件里，编程时可能会出现3种样式的语言，但是这3种样式都属于JavaScript分别是

语言样式	代表词	解释
CommonJS	require、ReactDOM.render、React.createClass	这个是node默认支持的JS的写法
ES6	import、export、extends	这是ECMAScript 6的简称，是JavaScript写法的一个变种，类似CoffeeScript
JSX	在render的返回值里	JSX是Facebook为了React提出一种解析语言，仅仅在render的返回值里

//CommonJS
var component = React.createClass({
  render: function() {
    return (
      <p>这是CommonJS的写法</p>
    )
  }
});

//ES6
class component extends React.Component {
  render() {
    return (
      <p>这是ECMAScript 6的写法</p>
      )
  }
}

不管使用哪种写法，在render里的 return()内部才是JSX的部分 一种看上去像HTML实际是JavaScript的语言格式，

如果想在JSX内部嵌套使用JavaScript的变量，需要加入大括号

1
2
3

return (
  <p>外部是JSX{大括号内部才是正常的JavaScript}外部是JSX</p>
  )

ES常用知识点

详细的ES教程请参考阮一峰的ES6教程

ES6的变量作用域

ES6中变量定义有3种方式var、const、let，其中let存在严格的作用域概念，必须先声明后使用，而const和var则和传统JavaScript的一样，由此引发了很多疑问

ES6的解构赋值

ES6存在一种赋值方法叫解构赋值


var name = "Li"
var number = "001"

{name, number} = student //进行解构赋值

console.log(student.name)// "Li"
console.log(student.number)// "001"

ES6的import/export

ES6中对模块的链接使用的是import和export关键词，类似于其它语言中的include和import一样，但是稍微有些不同的是，ES6可以export多个文件

//file.jsx
export default ...

export value1
export value2

当我使用import加载上述文件的时候

1 2	import custom from "file.jsx" //使用custom作为名字加载default的export import {value1,value2} from "file.jsx"//加载value1和value2两个export

参考文章对目录进行import可以直接从目录导入

ES6的Arrow Function

ES6中有一个常用的语法糖叫做 Arrow Function

1	const example = param => value

这句话准确的描述是: 定义了一个example的const变量，变量指向一个匿名方法的方法，方法带有一个参数param，方法内部直接返回value 用传统的JS来写就是

var example = funcation(param) {
  return value;
}

console.log(example)// 打印方法 "funcation(param) {return value}"
console.log(example())// 打印方法执行结果 "value"

除了以上之外箭头函数还可以使用小括号来包裹多个参数，和大括号执行多条语句而不是直接返回

const example = （param1，param2） => {
    console.log("执行第一条语句")
    cnnsole.log("执行第二条语句")
}

从上文可以看出，大括号是可以不进行return的，小括号还可以用来包裹直接返回的Object对象，例如以下两种是等价的

//使用小括号直接返回对象
const example1 = (param1,param2) => ({key:"value"})

//使用语句手动返回对象
const example2 = (param1,param2) => {
  return {key:"value"}
}