React基础语法

本文写给React初学者.

目录

• 安装node.js
• 安装React脚手架工具并创建项目
• 项目中基础语法的使用及介绍

安装node.js

安装方法：直接进入node.js官网，按照使用的设备进行下载安装

node安装之后，npm包管理工具也会一起安装成功.

安装React脚手架工具并创建项目

1. 打开终端，执行 npm install -g create-react-app 进行脚手架的安装.
2. 脚手架安装成功后，执行 create-react-app demo(demo为项目名称，可自定义) 进行创建项目.
   
3. 创建成功后，按照命令行提示，运行项目即可.
   

项目中基础语法的使用及介绍

一. 注册一个组件的方法：让一个类继承React.Component即可

import React, { Component } from 'react'
// react中给我们提供了封装好的Component父类
// 上边的写法相当于
// import React from 'react'
// const Component = React.Component

class App extends Component{
	// 当没有内部数据定义和外部数据传入的时候，构造器可省略不写
	// constructor(props) { super(props); } 
	
	//  在类中render函数必须手写，不然会报错
    render(){
        return (
            <div className="box">hello world</div>
        );
    }
}

export default App;

二. React中的jsx语法：在React中，写在js中的html标签都为jsx语法. jsx的语法特点如下：

1. 使用jsx语法时，必须要引入react，不然会报错.
2. jsx中标签不用单引号或者双引号包裹.
3. jsx中，如果使用自己创建的组件，名字开头必须大写.
4. jsx的语法与html极其相似，在这里的类名使用的是className，而不是class.
5. jsx中的注释是长这样的： {/* 我是注释 */}
6. jsx中的JavaScript表达式必须写在 {} 花括号中.

Jsx语法的优势：

1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化(生成虚拟Dom).
2. 它是类型安全的，在编译过程中就能发现错误.

三. 组件的挂载：我们需要借助 react-dom 进行组件的挂载操作.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ReactDom中的render方法，可以把某个组件挂载到某一个dom节点上
ReactDom.render(<App />,  document.getElementById('root'));

四. Fragment占位符：组件的最外层必须是一个单独的容器。确保这一条件，但又不想让最外层容器渲染到页面，则可以用Fragment占位符实现.

import React, { Component, Fragment } from 'react'
// react中为我们暴露了封装好的 Fragment -- API
// 直接引入即可使用
class App extends Component{
    render(){
        return (
        	{/* 此处的Fragment不会渲染到浏览器 */}
            <Fragment>
				<h1>标题</h1>
				<p>内容</p>
			</Fragment>
        );
    }
}
export default APP;

五. 如何定义、修改组件中的数据？

class App extends Component{
	constructor(props) {
		super(props);
		// 在state中定义组件内部数据
		this.state = {
			name: 'world'
		}
	}
    render(){
        return (
        	{/* 在jsx的花括号内使用 */}
 			<button onClick={this.handleClick.bind(this)}>按钮</button>
        );
    }
	// 在自定义方法中使用 setState 修改state中的数据
	handleClick() {
		this.setState({
			name: '世界'
		})
	}
}

注意：

1. 不要直接修改组件中的state, this.state.name = ‘xxx’ 这种是错误的写法. 正确写法是：this.setState({ name: ‘xxx’ }).
2. 构造函数是唯一可以给 this.state 赋值的地方.

七. 事件绑定、以及事件绑定时如何改变this指向？

1. React中的事件绑定不与传统的事件处理函数相同，需要使用驼峰式绑定：onClick={函数表达式}
2. 由于 class(类) 中的方法默认不会绑定 this, 所以需要我们手动进行绑定，如果在使用时没有手动绑定this, 那么当你调用这个函数的时候，this 的值会是 undefined.
3. 事件绑定时绑定this推荐两种方式：

// 第一种：使用bind进行绑定
return (
	<button onClick={this.handleClick.bind(this)}></button>
);

// 建议把bind函数写在构造器里, 在元素节点上直接调用即可
constructor(props) {
	super(props);
	// 在此做this绑定
	this.handleClick = this.handleClick.bind(this);
}
return (
	{/* 在此调用 */}
	<button onClick={this.handleClick}>按钮</button>
);


// 第二种：使用箭头函数 --- 箭头函数不会改变this指向
<button onClick={() => handleClick()}>按钮</button>

八. 父子组件的数据传递？

// 父组件中
<ul>
  {
    this.state.list.map((item, index) => {
      return (
        <div>
          {/* 注意给子组件传递方法的时候，要先做一个this绑定 */}
          <TodoItem
            content={item} // 传递数据
            index={index} // 传递数据
            // 传递方法
            deleteItem={this.handleItemDelete.bind(this)}
          />
        </div>
      )
    })
  }
</ul>

// 子组件中
import React, { Component } from "react";
class TodoItem extends Component {
  constructor(props) {
    super(props);
    // 在构造函数中改变this指向
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>{this.props.content}</div>
    )
  }

  handleClick() {
    // 调用父组件传递过来的方法
    this.props.deleteItem(this.props.index)
  }
}

export default TodoItem;

九. state、props、render的关系?

1. state用来定义组件内部数据，props用来接收外部数据.
2. 当state、props做出改变的时候，render函数就会重新执行，重新渲染视图.
3. 当父组件的render函数被运行时，它的子组件的render都将被重新运行一次.

十. react的生命周期

后续持续更新…如有错误，欢迎指正~ 共勉！