React的学习（上）

摘要

众所周知，前端三大框架Angular、React、Vue，因此为了跟上时代的步伐，最近开始着手学习React，这时候就发现个大问题，框架一直在更新，提倡的编写语法也在更新，网上有许多教程都是一两年前的了，所以，我决定直接从官方英文文档入手学习，学习的框架版本为最新的ReactV15.5.0，现将学习笔记整理以下，以供你们参考，本篇文章主要是react一些基础语法的讲解与总结，如需深刻了解，可查阅官方文档，也敬请期待后续文章。

1、React有什么好？

一、组件化

什么是组件？答曰：功能独立，封装良好的代码块。前端页面一直提倡组件化，由于组件化能够实现高重用，大大提高了咱们的开发效率，也让咱们的页面结构变得更加清晰。因此React提倡将页面解构成组件树，以组件为最小单元构造页面。

二、虚拟DOM

众所周知，JS的DOM操做，是影响网页性能的重要因素之一，所以React提出了虚拟DOM的概念，组件并非真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫作虚拟 DOM （virtual DOM）。只有当它插入文档之后，才会变成真实的 DOM 。根据 React 的设计，全部的 DOM 变更，都先在虚拟 DOM 上发生，而后再将实际发生变更的部分，反映在真实 DOM上，这种算法叫作 DOM diff ，它能够极大提升网页的性能表现。

2、用React构建你的webApp须要什么？

你须要React、React-DOM、babel。
React-DOM的做用就是将咱们本地的虚拟DOM插入文档，使其变成真实的DOM。
咱们在编写虚拟DOM时，可使用JSX语法，它将JS和XML语法结合在一块儿，以下

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
//你能够将你的JS表达式放入{}中，以下
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

同时React提倡使用ES6语法，因此咱们须要使用babel编译个人JSX和ES6语法

3、开始构件你的组件

你们若是懒得搭建环境，能够在这里练习。

一、定义组件

官方提供两种方法：
1）以JS函数方法，这种方法适用于比较简单的组件，好比根据输入返回模板后，无state的变化

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2）以 ES6 class 的方式

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

注意：组件名建议都以大写字母开头，以和HTML标签区分

二、渲染组件

上面构建出来的都是虚拟DOM，要使其在页面显示，还须要将其插入真实DOM，这时就须要，也是必需要如下这步

ReactDOM.render(
  <Welcome name="嵘么么"/>,
  document.getElementById('root')
);

ReactDOM.render()接受两个参数，第一个是要渲染的组件，第二个使所插入的地方

三、state和props

学习完上面方法，你就能够构建一个静态的组件了，可是，这时候就有个问题，咱们组件间须要通讯，咱们页面须要交互，那怎么实现呢?不急，咱们接下来一一讲解
1）props
组件的属性值都保存在props这个对象上，这是个可读对象，咱们能够给组件定义自定义属性，调用组件时设置的属性值，在组件内部能够经过this.props.yourprop拿到,例子以下

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
ReactDOM.render(
  <Welcome name="嵘么么"/>,
  document.getElementById('root')
);

//这里的引号包含的嵘么么也能够是变量，这时候就不能用引号包含了，须要用{}包含

2）state
state是组件的私有变量，只有组件本身能够访问，state的关键做用是：React只有当state改变时会从新渲染组件，所以，咱们能够把组件当作个状态机，当state改变时，咱们的视图也会改变。state的初始化，须要在constructor构造函数里完成。

class Welcome extends React.Component {
  constructor(props){
    super(props);
    this.state={
        key:value
    }
  }
  //注意，若是用到构造函数，那么应如此书写constructor(props){super(props);你的代码}
  //props和super(props);是必须的，你的代码应该放在super()以后
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

修改state时，则须要经过

this.setState({
    key:newValue
});
//setState会将传入的对象与原始state合并，而非覆盖

这里对state和props只讲解了基础使用，二者的详细区别与实例，可查看个人另一篇文章《React的组件间通讯》

四、事件

事件是页面交互的基础，React组件中，事件监听程序名采用驼峰法命名，以下：

class Welcome extends React.Component {
    constructor(props){
    super(props);
    this.state={
        name:"嵘么么的我的博客"
    }
    this.handleClick=this.handleClick.bind(this);
  }
  handleClick(){
    const name=this.state.name;
    alert(name+"欢迎您！");
  }
  render() {
    return <div onClick={this.handleClick}>点我</div>;
  }
}
ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

上面的表达式this.handleClick=this.handleClick.bind(this);是必须的，由于handleClick()函数；里用用到this指针，因此咱们必须绑定this指针，若是你以为很麻烦，官方还提供了其余两种方法

//方法一
 handleClick=>{
    alert(this.state.name+"欢迎您！");
  }
//方法二
render() {
    return <div onClick={(e)=>this.handleClick(e)}>点我</div>;
  }

上面两种方法都用到了箭头函数，由于箭头函数内部没有定义本身的this，因此当在箭头函数内部引用this时，this会绑定为父级的this，而且不能被改变。

阻止事件冒泡
react里的ev是封装过的ev对象，并非原装的，因此有些原装的方法不行，好比事件冒泡，须要经过ev.nativeEvent.stopImmediatePropagation()实现，分析以下：
1）React为了提升效率，把事件都委托给了document，因此 e.stopPropagation() 并不是是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。
2）e.stopPropagation()不行，浏览器支持一个好东西，e.stopImmediatePropagation() 他不光阻止冒泡，还能阻止在当前事件触发元素上，触发其它事件。这样即便你都绑定到document上也阻止不了我了吧。
3）这样作还不行，React对原生事件封装，提供了不少好东西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活。

下节将讲述React的组件生命周期、表单、AJAX等

更多前端技术文章，欢迎前往个人我的技术博客：嵘么么的我的博客