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更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值