react组件封装自己的理解

为什么使用组件

一开始用react做项目的时候只知道react是组件化的，但是没有深入去理解为什么要封装组件，怎样去封装组件

上周在实际项目中自己尝试去封装了一个组件，最大的感受就是代码变得简洁了很多，本来要写三次类似代码现在只写一次就搞定了，不得不感概组件封装最实在的意义。

另一方面是可以提高我们编程的效率，代码复用性高了自然效率高了。

最后我觉得是提高思考的能力吧，换种更简单的方式去实现，思维方式得到提升。

组件的使用方法

一般我们都是先封装好组件，当然这个要提前想好怎么去设计这个组件可以最大限度的方便扩展维护等。封装组件我们要记得在最后export，一般封装的组件也是我们的子组件。然后在父组件中使用子组件的时候我们可以先import然后传入相关的值，这里设涉及父组件向子组件传值和子组件向父组件传值。

父组件给子组件传值是一种传统的方式，用法如下

首先在父组件中引入子组件并传值：

子组件中使用props接收传入的值：

这时就完成了传值可以正常使用了。

另一种是子组件给父组件传值，有个ref属性，可以获取到子组件的整个真实dom实例，从而实现逆向传值。

还可以使用传递函数的方式实现子组件向父组件的传值，实际用的比较多。