react 子组件

三大框架最大的优势在于可以让前端更模块化，正如jquery时代，我们可以通过jquery的$.fn.name=function(){},模块化写法，对当前我们所需要的功能进行模块化封装。同样，到了spa时代，模块化得到了更大的发挥效果，其中，组件化编程就变的尤为重要。今天这里主要讲的就是react的子组件（上一节我们已经写了react的父组件，每一个模块都可以相当于一个组件）。

一、非组件实现方式：

const hobbys = ['篮球', '羽毛球', '唱歌', '看书', '爬山', '跑步'];
constructor(props) {
   super(props);
   this.state = {
       count: 0,
       hobbys: hobbys
    };
 this.addCount = this.addCount.bind(this);
}

render() {
    console.log('4- render 渲染');
    return (
         <div>
             <p>姓名: {this.props.name}</p>
             <p>年纪: {this.props.age}</p>
             <p>当前数字: {this.state.count}</p>
             <p><button onClick={this.addCount} >点击数字加1</button></p>
             <span>爱好</span>
             <ul>
                {
                    this.state.hobbys.map((item, index) => {
                        return(
                            <li key={index}>{item}</li>
                        )
                   })
                }
            </ul>
         </div>
     )
}

二、组件的写法

1.子组件的写法

class Hobby extends React.Component {
     constructor(props) {
        super(props);
    }
    render() {
        return (
            <li>{this.props.name}</li>
        )
    }
}
2.子组件的调用

<span>爱好</span>
<ul>
    {
        this.state.hobbys.map((item, index) => {
            return(
                  <li key={index}>{item}</li>
            )
        })
    }
</ul>

写子组件其实很简单，就和你平常写一个父组件一样，但它的难点是哪些可以很好的抽离出来，哪些可以抽离出来作为一个单独的组件。同时，说到组件，就不得不说一下关于子父组件之间通信的问题。
正如大家都知道的，组件与组件之间数据流是单向的，所以需要有特定的方式对数据进行传递。

父组件传递给子组件。

父组件传递给子组件的方式最常见也是最简单的，通过props来进行传递，正如上面的代码一样，在这里就不重复添加代码，需要说明的是函数也是同样的方式。

父组件调用子组件。

父组件调用子组件的方式很多，而我本人比较喜欢的方式有通过ref h5的这个特性，对其子组件的方法进行调用。代码如下

<ul>
    {
      this.state.hobbys.map((item, index) => {
          return(
              <Hobby ref='hobby' key={index} name={item} />
          )
      })
    }
</ul>
<button onClick={this.getItemValue.bind(this)}>打印所有爱好</button>
getItemValue() {
    this.refs.hobby.getValue();
}

在其子组件中定义getValue方法，因为这里重复定义了ref，它会把当前ref给数组里面的最后一个子组件。
代码链接：https://github.com/jiosers/react-study

最后编辑于：2019.06.30 17:16:58