首页 > 代码库 > React的学习(上)

React的学习(上)

摘要

众所周知,前端三大框架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等

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

React的学习(上)