React 的学习

React 的学习

来源于 https://jspang.com/posts/2019/05/04/new-react-base.html#%E8%A7%86%E9%A2%91%E5%88%97%E8%A1%A8 整理

1. React 脚手架

• 1.1 下载脚手架(在终端中进行)

  cnpm i -g create-react-app 进行全局的安装

• 1.2 创建项目

  F: 进入F盘
  mkdir ReactDemo //创建ReactDemo文件夹
  cd ReactDemo // 进入RecatDemo 文件夹
  create-react-app demo01 //用脚手架创建React项目
  cd demo01 //等创建完成后，进入项目目录
  npm start //预览项目，如果能正常打开，说明项目创建成功

2. Hello World 展示

• 2.1 index.js文件

// 引入需要的 react 和 操作DOM的 react-dom
import React from "react";
import ReactDOM from "react-dom";
// 引入 App.js 文件 里面包含了需要执行的代码
import App from "./App";

// 渲染
// root 是根据 index.html 中设置的 id 选择器来的 
ReactDOM.render(< App />, document.getElementById("root"))

• 2.2 App.js 文件

import React from "react";
const Component = React.Component;
/**
 * import React from "react";
    const Component = React.Component
    等价于 
 * import React, { Component } from "react";
 * 
 */
class App extends Component {
	render() {
	return (
		<div>
			Hello World
		</div>
		)
	}
}
// 暴露出 App
export default App;

3. JSX 的基本使用

JSX 的使用 可以将内容用 {} 包裹起来, 定义类名 需要使用 className

import React, { Component } from "react";
class App extends Component {
	render() {
	return (
		<div>
			<ul>
				<li className="li-item">{ true ? "react" : "react-dom" }</li>
			</ul>
		</div>
		)
	}
}
// 暴露出 App
export default App;

如果不想要使用 div 进行代码包裹 可以使用 Fragment 将代码包裹
Fragment 相当于 vue 中的 template

import React, { Component, Fragment } from "react";
// Fragment 相当于 vue 中的 template 
class LetterSis extends Component {
    render() {
        return (
            <Fragment>
                <ul>
                    <li>React</li>
                </ul>
            </Fragment>
        )
    }
}
export default LetterSis;

4. 数据绑定

数据绑定首页得定义数据 , React 中数据的定义依靠 构造函数 constructor

// js 的构造函数
constructor(props) {
		// 调用父类 的构造函数 固定的写法
        super(props)
        this.state = {
            inputValue: "React"
        }
    }

在React中的数据绑定和Vue中几乎一样，就是使用{}来标注，其实这也算是js代码的一种声明。比如现在我们要把inputValue值绑定到input框中，只要写入下面的代码就可以了。其实说白了就是在JSX中使用js代码。

 <input value={this.state.inputValue}/>

• 绑定事件

这时候你到界面的文本框中去输入值，是没有任何变化的，这是因为我们强制绑定了inputValue的值。如果要想改变，需要绑定响应事件，改变inputValue的值。比如绑定一个改变事件，这个事件执行inputChange()方法。

• 错误写法

 <input value={this.state.inputValue} onChange={this.inputChange}/>

inputChange(e) {
	// 获取输入的值
	console.log(e.target.value);
	console.log(this) // undefined
	this.state.inputValue = e.target.value  // 会报错
	/**
	1. this 的指向错误
	2. 另一个是 React 中改变值需要使用 this.setState 方法
	*/
}

原因
一个是this指向不对，你需要重新用bind设置一下指向(ES6的语法)。
另一个是React中改变值需要使用this.setState方法。

• 正确写法

使用 bind 改变this 的指向

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>

inputChange(e) {
    this.setState({
        inputValue : e.target.value
    })
}

• 完整代码

import React, { Component, Fragment } from "react";
// Fragment 相当于 vue 中的 template 
class LetterSis extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: "React"
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    <input value={this.state.inputValue} 
                    	onChange={this.inputChange.bind(this)}/>
                    <button>添加</button>
                </div>
                <ul>
                    <li>React</li>
                </ul>
            </Fragment>
        )
    }
    inputChange(e) {
        this.setState({
            inputValue : e.target.value
        })
    }
}
export default LetterSis;