React的学习（上）

Posted 2020-09-13 杨浪

摘要

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

一、React有什么好？

1、组件化

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

2、虚拟DOM

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

二、用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语法

三、开始构件你的组件

大家如果懒得搭建环境，可以在这里练习。

1、定义组件

官方提供两种方法：
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标签区分

2、渲染组件

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

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

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

3、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的组件间通信》

4、事件

事件是页面交互的基础，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等

本文转自的大神博客：嵘么么的个人博客