React -- 数据流

墨蓝 2022-06-16 01:29 186阅读 0赞

在React中，数据是从父组件到子组件流动的，这条原则可以让我们只需要在父组件上操作，然后子组件就会自动更新并渲染。

这一节有两个很重要的概念：React组件的state和props。  
如果初始化父组件的props，那么React就会向下遍历组件树，尝试渲染相关的子组件；而state则只涉及组件自己内部的状态，这些状态不会干扰到组件的父／子节点，仅和组件自身有关。

## state ##

内置方法setState：当我们调用这个方法后，由于组件的状态改变，这时候，组件就会尝试重新渲染。

在React中，常常在事件处理方法中更新state，例如按钮绑定的方法等等。

一个栗子：（本栗采用ES6 class的语法方式构建组件）

import React, { Component } from 'react';
    class Counter extends Component {  
        constructor(props) {
            super(props);
            this.handleClick = this.handleClick.bind(this);
            this.state = { 
                count: 0,
            }; 
        }
        handleClick(e) {
            e.preventDefault();
            this.setState({
                count: this.state.count + 1,
            }); 
        }
        render() { 
            return (
                <div>
                    <p>{
       this.state.count}</p>
                    <a href="#" onClick={
       this.handleClick}>  </a>
                </div> 
            );
        } 
    }

## props ##

首先给出Tab组件的基本方法，本节我们将在这个控件的基础上学习：

class Tabs extends Component {  
        constructor(props) {
            super(props); 
        }
        // ...
        render() {
            return <div className="ui-tabs"></div>;
        } 
    };

下面进入正题：

props是React用来让组件之间相互联系的机制，通俗的说，就好像是方法的参数。开发者利用props，可以在React组件之间传递数据。

组件的props一定来自于默认属性或从父组件传递而来，如果我们试图在代码中修改props的原始值，React将会报错。

栗子：

<Tabs classPrefix={'tabs'} defaultActiveIndex={0}>
        <TabPane key={0} tab={'Tab 1'}> Tab1content   </TabPane> 
        <TabPane key={1} tab={'Tab 2'}> Tab2content   </TabPane>  
        <TabPane key={2} tab={'Tab 3'}> Tab2content   </TabPane>
    </Tabs>

在组件Tabs中，classPrefix和defaultActiveIndex都是组件的props。

**1、子组件prop**

在React中有一个重要且内置的prop：children，它代表组件的子组件的集合。例如，上面这个Tabs的子组件就是：

<TabPane key={0} tab={'Tab 1'}> Tab1content   </TabPane> 
        <TabPane key={1} tab={'Tab 2'}> Tab2content   </TabPane>  
        <TabPane key={2} tab={'Tab 3'}> Tab2content   </TabPane>

那么，父组件Tabs渲染子组件TabPane的方法就是：

getTabPanes() {
        const { classPrefix, activeIndex, panels, isActive } = this.props;
        return React.Children.map(panels, (child) => { if (!child) { return; } const order = parseInt(child.props.order, 10); const isActive = activeIndex === order; return React.cloneElement(child, { classPrefix, isActive, children: child.props.children, key: `tabpane-${order}`, }); }); }

这段代码完成的功能是渲染子组件。通过方法map遍历子组件，同时将order, isActive, children, key利用cloneElement方法克隆到一个新创建的TabPane组件中，然后返回这个新的组件集合。这样，在我们需要的时候，调用方法getTabPanes即可完成对组件的渲染。

2、其他组件prop

在前面的栗子中，组件prop我们传入的是一个固定值：

但是，其实prop的强大之处在于，我们可以向其中传入动态值，甚至节点（component props）。

栗子：

<Tabs classPrefix={'tabs'} defaultActiveIndex={0} className="tabs-bar">             
        <TabPane order="0" tab={<span><i className="fa fa-home"></i> Home</span>}>    
        </TabPane>
        <TabPane order="1" tab={<span><i className="fa fa-book"></i> Library</span>}>
        </TabPane>
        <TabPane order="2" tab={<span><i className="fa fa-pencil"></i> Applications</span>}>     
        </TabPane> 
    </Tabs>

这样，配合上相关的渲染代码，在渲染后，我们就可以在每个TabPane中，插入新的元素。

渲染的关键在于遍历所有tabpane组件的tab prop，进行必需的操作后，将它们返回。

3、用function prop与父组件通信。

state的通信集中在组件内部，而对于prop，它的通信则是父组件向子组件传播。

4、propTypes

propTypes用于规范props的类型和必需的状态：如果组件定义了propTypes，那么在开发环境下，就会对prop的值新型类型检查，如果传入的prop与要求的类型不匹配，React将会在控制台中报出warning。  
栗子：

static propTypes = {
        classPrefix: React.PropTypes.string, 
        className: React.PropTypes.string,  
        defaultActiveIndex: React.PropTypes.number, 
        activeIndex: React.PropTypes.number.isRequired,// 必需
        onChange: React.PropTypes.func,// func 不是 function，另外，对于布尔类型是bool 而不是 boolean
        children: React.PropTypes.oneOfType([
            React.PropTypes.arrayOf(React.PropTypes.node),
            React.PropTypes.node, 
        ]),
    };