React Tips-1

• Create React App

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 6 和 npm >= 5.2。要创建项目，请执行：

npx create-react-app my-app                 //这一步最好挂梯子，不然会很慢
cd my-app
npm start

 

• 组件：

1. 大写字母开头的名称都是组件 
2. index.js 是入口
3. 引入React为了理解组件的相关语法
4. 引入ReactDOM为了让组件渲染到HTML文件的标签中
5. export default 名称 是导出  这样子其他地方才可以导入
6. 组件的创建：

  class 组件名  extends  Component{
    render(){                       //必有函数，负责要显示的内容
        return(
             //要显示的内容
         )；
      }
   }

 

• key属性

React 中规定在循环标签的时候，标签内要添加 key 属性，且 key 值不能一样，所以一般值设为循环项的索引值index

 

• state

React 避免 Dom 操作，主要是面向数据操作：

定义 state (组建中存放数据的地方)

constructor( props ){
    super ( props );
    this.state.list [
        ......
    ]
}

然后在视图标签中的写入 { js 表达式（用 map 循环定义中的数据）}

 

• 尽量不要直接操作state的数据

在react 中操作 state中的数据，尽量不直接操作state的数据，而是拿一个变量接收后，再操作该变量

如删除函数:

handleItemClick (index){
    const newList = [...this.state.list];  // 拿newList接收 state中list的值
    newList.splice(index,1);              //删除newList中de 该 index的值
    //将删除后的数组放置在state中
        this.setState({
            list:newList
        })
}

• React中的参数传递

1. 父--->子

通过属性的形式从父组件向子组件传递参数

子组件通过props的形式接收父组件传递过来的参数

1. 子--->父

子组件如果想和父组件通信, 那么子组件需要调用父组件传递过来的方法

例：

this.props.delete 的delete属性是父组件传递过来的一个属性(该属性绑定了父组件的方法)

 

• React代码优化

在顶部引入import React, { Component, Fragment } from 'react'，便可以将后面代码中的  React.Fragment 简化为 Fragment（此标签中不能带类名） ，React.Component简化为 Component；在

 

1、在构造函数中做好this指向的改变

下面就不用.bind(this)

这样做可以改变代码的执行性能

 

2、解构赋值

 

3、解决render函数中代码过长

将jsx 中的 js集中部分单独作为一个函数