React入门知识汇总

  由于最近1个月在工作当中需要写前端的页面，于是用到了React，也算是入门了吧，同时组件库用到了公司内部的一些组件，这里对近一个月学到的React知识进行一个简单的汇总，同时供大家参考，有什么不对的地方欢迎大家补充。

---

  首先看到React的官网对React的介绍是：用于构建用户界面的JavaScript库。刚开始可能对这个概念有些模糊，甚至一脸懵逼。但真正用过以后才能更加深刻的理解其中的含义，这里我可以说一下对这个概念的简单理解：我们可以用React来写我们的页面，同时有关组件的一些监听事件也可以在React中定义。

开发环境的搭建

  这里开发环境的搭建我就不介绍了，大家可以去网上找很多教程来搭建React的开发环境，这里我的开发环境选择可以供大家选择参考：React+ node(用到npm) + webpack(对前端所需要的包进行管理) + WebStorm(前端开发的IDE)。

组件(Component)

  在React中，组件是一个基本的概念，同时所有的界面也几乎都是由各个组件来构成的，多个组件共同组成我们想要的界面。 同时一个组件内可以包含有若干的 html的基本元素。所以界面，组件，html元素三者之间的关系的个人理解为：一个界面由一个或多个组件构成，一个组件内包含有一个或多个 html元素。
  下面我们就先通过一个实例，来说明一下React中怎样定义一个最简单的组件。

import React from 'react';
export default class Demo extends React.Component{
	render(){
         return(
             <div>
               <p> Welcome to React World.</p>
             </div>
           )
    }
}

  上面的代码中，我们定义了一个最简单的React的组件，但是确包含了React组件的最基本的框架，下面来具体说明一下其中包含的React的基础知识：

1. 上面代码中使用的React的 JSX 语法，这是对 javascript 语法的扩展，它允许我们在js中使用直接的html标签。
2. 声明一个组件，我们需要定义一个类，然后让这个类来继承 React.Component这个类，这样声明的这个类就成为了我们定义的组件。
3. 每一个我们定义的React组件，都要实现一个 render 方法，这个方法返回我们需要渲染的界面，也就是我们真正的 html 页面。
4. 上面的代码中，我们用到了 export 关键字，被这个文件标明的class表示可以让我们定义的组件被外部文件JSX文件所引用，当然也可以不加 export修饰，这样定义的组件就只能被文件内部的组件引用。同时我们看到组件还被 default修饰，需要注意的是：一个JSX文件中，可以有多个文件被 export 修饰，但是只能有一个组件被 default来修饰。

  ATTENTION：在上面的代码中的 render方法中，我们需要注意的是，我们只能返回一个根 html 元素，也就是说我们只能返回一个最上层的 html 元素，下面的代码是错误的，会报错。

import React from 'react';
export default class Demo extends React.Component{
	render(){
         return(
             <div>
               <p> Welcome to React World.</p>
             </div>
             <div>
              <p> Welcome to React World again.</p>
             </div>
           )
    }
}

  上面的代码是错误的，我们在最上层只能有一个html 元素，而上面的代码中，我们有 2个 div 元素，有一种可行的解决方法：我们可以将整个2个div元素放到统一的父元素div元素中，如下面的代码所示：

import React from 'react';
export default class Demo extends React.Component{
	render(){
         return(
           <div>
				 <div>
                    <p> Welcome to React World.</p>
                </div>
                <div>
                   <p> Welcome to React World again.</p>
                </div>
           </div>
           )
    }
}

组件之间通信(props与state)

  一个页面由一个或多个组件来组成，多个组件之间可能会进行通信，从而实现一个动态的网页效果，这里我介绍一下简单的组件之间的通信: props 和 state。

props

  父子组件之间如果进行通信，我们可以通过父组件直接给子组件传递参数来进行通信，子组件可以在内部获得这些参数，下面还是通过一个简单的例子来进行说明：

import React from 'react';
class ChildComponent extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return(
		  <div>
			<button onClick={(event) => this.props.handleClick(event)}></button>
			<span>{this.props.info}</span>	
		  </div>
		)
	}
}
export default Demo extends React.Component{
	handleClick(event){
		alert("You click a button!");
	}
	render(){
		return(
			<ChildComponent handleClick={this.handleClick} info="some messages"></ChildComponent>
		)
	}
}

  下面我们看一下上面的代码中包含的基础概念：

1. 在子组件中，我们看到了子组件的构造函数，构造函数对组件进行了初始化，包括设置state。
2. 在 ChildComponent 组件的render方法中，我们可以看到button元素的点击事件监听函数是来调用 this.props 中的 handleClick 函数的，通过span元素内部显示的信息也是显示 this.props.info来进行显示的。那么这个 this.props到底是个什么呢：父组件向子组件传递数据，子组件中要想访问到这些数据就是 通过 this.props 来访问的，同时注意到 this.props 就是一个不可变的对象，也就是说你只能访问它，不能修改它。
3. 父组件如果想要给子组件传递数据，只需要在自己的 render 方法中给子组件传递数据即可，给子组件传递属性的时候，有2种赋值方式：1. 直接用字符串赋值 2. 在花括号内赋值，在JSX语法种，花括号内可以填写任意的 javascript表达式。
4. 父组件即可给子组件传递具体的值，又可以给子组件传递一个函数。
5. 总体来讲，父组件给子组件传递数据的方式就是：父组件通过属性给子组件赋值，子组件通过 this.props 来访问到这些值。

state

  state顾名思义，就是状态。这里所说的状态指的是组件的状态，这里我们还是通过一个例子来说明这里的基本概念：

import React from 'react';
class Demo extends React.Component{
	constructor(props){
		super(props);
		this.state = {
		 number:1
		};
	}
	handleClick(event){
		let number = this.state.number;
		number = number + 1;
		this.setState({
			number:number
		});
	}
	render(){
		return(
			<button onClick={(event) => this.handleClick(event)}></button>
			<span>{this.state.number}</span>
		)
	}
}

  上面的例子，我们可以看到每当按钮点击的时候，number会自增1，下面来说一下里面的基本概念和知识点：

1. state维护的是组件内部的状态，对外是不可见的，也就是说，除组件本身可以访问到state外，其他任何组件都访问不到state（包括父组件），对其他组件透明。
2. 在上面的示例中，我们在构造函数中直接对this.state进行了赋值操作，而在handleClick函数中，我们使用了setState函数来对state进行操作，这里就隐藏着一个知识点： state只有在构造函数中才能对其直接赋值，其他情况下，都要使用setState来改变它的值。
3. 上面的代码中，span标签内显示的是 this.state.number这个标签，每当按钮按下时，span标签显示的值就会改变，这里又有一个知识点：当组件的state发生变化的时候，组件的 render 函数就会被重新调用一次。，正是由于这样的机制，我们才可以实现上面的功能，每当按钮点击，this.state里面的number发生变化，render函数被重新调用，组件的UI更新。