React16的简单上手之路

小伙伴想学习的可以参考技术胖的教程哦，这是我最喜欢的前端大佬，地址 http://www.jspang.com/posts/2019/05/04/new-react-base.html#

1、安装

安装脚手架： 

npm install -g create-react-app

 创建项目：

create-react-app demo01   //用脚手架创建React项目

 运行：

npm start   //预览项目，如果能正常打开，说明项目创建成功

2、项目入口文件--src--index.js

     项目编写文件--src--App.js 

3、简单的代码示例--增加和删减示例

 

父组件：

import React, { Component } from 'react';
import Child from './child.js'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }
  render() { 
    return (  
      <div>
        <div><input value={this.state.value} onChange={this.changeInput.bind(this)}/><button onClick={this.addIn.bind(this)}>增加</button></div>
        <ul>
         {this.state.list.map((item,index)=>{
            return <div><Child key={item+index} content={item} index={index} deleteItem={this.deleteItem.bind(this)}/></div>
         })}
        </ul>
      </div>
    );
  }
  changeInput(e){
    this.setState({
      value:e.target.value
    })
  }
  addIn(){
    this.setState({
      list:[...this.state.list,this.state.value]
    })
  }
  deleteItem(index){
    let list =this.state.list;
    list.splice(index,1)
    this.setState({
      list:list
    })
  }
}
 
export default App;

 

子组件：

import React, { Component } from 'react';

class Child extends Component {
  render() { 
    return (  
      <div onClick={this.handleClick.bind(this)}>
         {this.props.content}
      </div>
    );
  }
  handleClick(){
      this.props.deleteItem(this.props.index)
  }
}
 
export default Child;

4、代码解释：

（1）关于input

react是需要state来控制变量的，可以在constructor中初始化变量的值

 constructor(props) {
    super(props); //调用父类构造函数，固定写法
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }

<input value={this.state.value} onChange={this.changeInput.bind(this)}/> 绑定事件，需要绑定this

changeInput(e){
    this.setState({
      value:e.target.value  //改变input的值需要用setState
    })
  }

(2) 循环数据

<ul>
    {
        this.state.list.map((item,index)=>{
            return <li key={index+item}>{item}</li> //需要key值，不然控制台会报错
        })
    }
</ul> 

（3）增加数据

<button onClick={this.addIn.bind(this)}>增加</button>

addIn(){
    this.setState({
      list:[...this.state.list,this.state.value]
    })
  }

 

（4）删除数据--注意是不能直接操作state的

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

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

（5）父子组件传值

把要循环的内容展示抽出去，再引入子组件，注册使用：

子组件：

import React, { Component } from 'react';

class Child extends Component {
  render() { 
    return (  
      <div>
        我喜欢邓紫棋
      </div>
    );
  }
  handleClick(){
      this.props.deleteItem(this.props.index)
  }
}
 
export default Child;

 

父组件：

import React, { Component } from 'react';
import Child from './child.js' --引入

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }
  render() { 
    return (  
      <div> --需要嵌套一层包裹的，官方要求
        <ul>
         {this.state.list.map((item,index)=>{
            return <div><Child/></div> --注册
         })}
        </ul>
      </div>
    );
  }
}
 
export default App;

 父组件传值给子组件：

<Child key={item+index} content={item}/>  --父组件传值

<div>
      {this.props.content}  --子组件接收
</div>

子组件传值给父组件--官方规定子组件不能直接修改父组件的值，子组件可以通过调用父组件的方法来实现修改父组件的值。

<Child key={item+index} content={item} index={index} deleteItem={this.deleteItem.bind(this)}/> 
通过deleteItem来调用父组件原来的删除事件，需要传index过去  --父

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

 handleClick(){
     this.props.deleteItem(this.props.index) 子组件调用父组件的方法
 }

 

以上为一个简单的入门，整理的是技术胖的教程，具体的api之类可以自己拓展学习，本篇只是一个入门的简单梳理。