React项目开发中的数据管理

React项目开发中的数据管理

  对于React的初学者在项目开发中常常还是会以DOM操作的思维方式去尝试获取、修改和传递数据，但是这种思想，在React思想中显然是错误的，针对这种情况下文将进行一个简易的总结。我们将从基础的纯React组件之间的传值开始论述，然后分析React结合Redux之间的数据传递，以及最后基于dva脚手架的数据传输问题进行探讨和分析。

一、 原生React组件的数据传输管理：

  原生React组件之间的数据传输主要依赖于两个关键词：属性（props） 和状态（state）。每一个组件都是一个对象，props是对象的一个属性，组件对象可以通过props进行传递。React 的核心思想是组件化的思想，应用由组件搭建而成，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。state与props的最大区别在于props是不可变的而state是可变的。具体内容后面会详细讲解。

原生React组件之间数据传递场景可以分为以下四种：
- 组件内部的数据传输
- “父组件”向“子组件”传值
- “子组件”向 “父组件”传值
- “兄弟组件”之间的传值

1. 组件内部的数据传输

  在初学过程的项目开发中常常会有去尝试DOM操作的冲动，虽然大部分情况下这种尝试是错误的，但是在某些时候还是不得不需要获取对DOM的值进行操作。例如：点击一个按钮之后触发一个点击事件，让一个input文本框获得焦点。jQuery开发者的第一反应肯定是给button绑定点击事件，然后在事件中通过$(‘select’)获取到要操作的节点，再给节点添加焦点。然而在React中这种操作是不允许的，而React中应该怎么做呢？

React Refs属性：

import React, { Component } from 'react';

class MyComponent extends Component({
  handleClick = () => {
   
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={
  this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

  我们可以从上面的代码当中看到 其中的ref在功能上扮演起了一个标识符(id)的角色，this.refs.myInput.focus()也有一种document.getElementById(‘myInput’).focus()的味道。

  上面的操作我们也称为React表单事件，React表单事件中除了ref具有关键作用外，还有另一个关键参数’event’。例如：当我需要实时获取到一个文本框里面的内容，然后进行一个判断，当满足某个条件的时候触发另一个事件。这个时候就需要使用到这个一个关键参数’event’。

React 表单事件-event参数：

class MyComponent extends Component{
   
    handleChange = (event) => {
        if(event.target.value === 'show'){
            console.log(this.refs.showText);
        }
    };
    render(){
        return(
            <div>
                <input type="text" onChange={
  this.handleChange}/>
                <p ref='showText'>条件满足我就会显示在控制台</p>
            </div>

        )

    }
}
export default MyComponent;

  上面实例实现的效果就是，通过event.target.value获取当前input中的内容，当input中输入的内容是show的时候，控制台就将ref为showText的整个节点内容打印出来。从这个实例当中我们也看到了，event作为一个默认参数将对应的节点内容进行了读取。

  因此在组件内部涉及的DOM操作数据传递主要就是这两种方式，可以根据不同的场景选择不同的方式。虽然ref适用于所有组件元素，但是ref在正常的情况下都不推荐使用，后面会进行介绍通过 state管理组件状态，避免进行DOM的直接操作。

1. “父组件”向“子组件”传值

  父组件与子组件之间的通信通常使用props进行。具体如下：

import React,{ Component } from 'react'