React 学习 | 目录结构详解、自定义组件、数据绑定

后面关于React的内容都是根据前端大佬技术胖的博客自己动手实践练习的

大佬的博客链接里面还有视频：https://jspang.com/detailed?id=46#toc21

1、目录结构详解

• node_modules ：这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

• public ：公共文件，里边有公用模板和图标等一些东西。

  • favicon.ico ：这个是网站或者说是项目的图片，一般在浏览器标签页的左上角显示。
  • index.html ： 首页的模板文件，我们可以试着改动一下，就能看到结果。
  • mainifest.json：移动端配置文件。

• src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

  • index.js : 这个就是项目的入口文件。
  • index.css ：这个是index.js里的CSS文件。
  • app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

• gitignore : 这个是git的选择性上传的配置文件

• package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。

• package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。

• README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。

2、React中新建组件实例

现在SRC的目录下面，新建一个文件Tqyl.js文件，然后写一个基本的HTML结构。代码如下：

import React, { Component, Fragment } from 'react'

class Tqyl extends Component {
    render() {
        return (
            <Fragment>
                <div>
                    <div><input /> <button> 增加战舰 </button></div>
                    <ul>
                        <li>航母</li>
                        <li>战巡</li>
                    </ul>
                </div>
            </Fragment>
        )
    }
}

export default Tqyl

然后把入口文件的 <App /> 组件换成 Tqyl 组件

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Tqyl from './Tqyl';

ReactDOM.render(
  <React.StrictMode>
    <Tqyl />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

3、React 中的响应式设计原理和数据绑定的方法

3.1、响应式设计和数据绑定

现在的需求是增加庭前云落的战舰，就需要先定义数据。数据定义在 Tqyl 组件中的构造函数里 constructor

import React, { Component, Fragment } from 'react'

class Tqyl extends Component {
    constructor(props) {
        super(props)   //调用父类的构造函数，固定写法
        this.state = {
            inputValue: 'Tqyl', //input中的值，先随便给个值，后续绑定数据看效果。
            list: [] //战舰列表
        }
    }
//在 React 中的数据绑定和 Vue中几乎一样，也是采用自定义名字的像是，就是使用{}来标注，这其实也算是JS代码的一种声明。

    render() {
        return (
            <Fragment>
                <div>
                    <div>
            //例如把inputValue值绑定到 input框中
                        <input value={this.state.inputValue} />
                        <button> 增加战舰 </button>
                    </div>
                    <ul>
                        <li>航母</li>
                        <li>战巡</li>
                    </ul>
                </div>
            </Fragment>
        )
    }
}

export default Tqyl

在上面代码中，给intputValue赋予一个 'Tqyl'，然后看效果。这里我们并没有进行任何的 DOM 操作，但是界面发生了变化。这些是 React 自动操作的，它会自动感知数据的变化。

3.2、绑定事件

经过上面的数据绑定，现在去界面的文本框里去输入值，是没有任何变化的，这是因为我们强制绑定了 inputValue 的值。如果要想改变，需要绑定 响应事件，改变 inputValue 的值。比如绑定一个改变事件，这个事件执行 inputChange() 方法。

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

3.3、列表数据化

给之前定义的list数组增加两个数组元素：

 constructor(props) {
        super(props)   //调用父类的构造函数，固定写法
        this.state = {
            inputValue: '', //input中的值，先随便给个值，后续绑定数据看效果。
            list: ['重巡','战列'] //战舰
        }
    }

有了数据后，可以在 JSX 部分进行循环输出，代码如下：

    render() {
        return (
            <Fragment>
                <div>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                        <button onClick={this.addList.bind(this)}> 增加战舰 </button>
                    </div>
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                return <li key={index+item}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            </Fragment>
        )
    }
    
    addList(){
        this.setState({
            /**这里的...是ES6新语法，扩展运算符。
              *就是把list数组进行了分解，形成了新的数组，然后再进行组合。
              *这种写法更简单和直观，所以推荐这种写法。
              */
            list:[...this.state.list,this.state.inputValue]
        })
    }    

3.4、数组下标的传递

如果说要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就有有事件产生，先来绑定一个双击事件。代码如下：

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                >
                    {item}
                </li>
            )
        })
    }
</ul>

    deleteItem(index) {
        let list = this.state.list
        list.splice(index, 1)
        this.setState({
            list: list
        })
    }