接触到React也有一段时间了,对于没有接触过其他类似js框架而直接接触React的伙伴们可能会觉得一下子入不了门,在这里我来谈谈我的看法,或许能帮上你什么忙。
首先声明一点,React是js库,核心是把HTML添加到js文件中去动态实现。和我们传统的页面搭建方式有一定的区别。 在动手实现页面的之前,首先要考虑页面的组成,拆分用户界面为一个组件树,尽可能的使每一个组件只完成一小部分功能。
React对于组件提供了生命周期钩子函数去响应不同的时刻,为我们对组件的操作提供了方便。 具体的生命周期函数在这里我就不一一介绍了,对于这些函数的使用,在实际过程中要和数据流的传递相结合。讲完数据流再具体说明。
React中,数据的流向是单向的,只能从父组件传递到子组件。当顶层组件的state发生变化时,React会向下遍历整个组件数,重新渲染所有使用这个属性的组件。 很多人理解不了这个信息传递的过程,习惯于在改变一个DOM属性的回调函数中重新获取其他的DOM做相应的改变。其实,这是一种进步,在原先那种方法下,思路需要很周全,如果有一点没有考虑到可能会有意想不到的结果。对于React的开发你只需要考虑当前操作对于父组件属性的改变,剩下的事情它会自动帮你完成。 对于state和props的理解,可以简单的理解为 在当前组件或者当前组件之下的组件的共用属性就定义为当前组件的state,子组件通过props去访问该属性。改变该属性的值只能通过所在组件的setState方法去改变,在子组件中只是读不能写。当然如果要在子组件中改变的话,需要将改变该属性的方法传递到子组件中,子组件通过this.props.方法名执行对应的操作。 对于生命周期,如果页面中没有数据的传递,简单的通过render实现静态页面即可,当然这样没有使用React的必要。对于state的操作一般放在除render之外的其他周期函数中,每一次state的改变都会使该组件及子组件重新加载,完成我们所需要的效果。
可能刚开始写简单应用的时候,你觉得这一步是没有必要的,但是随着应用的庞大,保证组件被正确使用已经是必不可少的事情。它能让我们更规范的去编写代码,减少问题的出现,维护起来也更加方便。 所以在写代码的时候养成加上验证的好习惯,对于以后更大应用的开发会更加有利。 至于添加验证的方式还是看官网的比较好http://reactjs.cn/react/docs/reusable-components.html
为什么选择React呢,其实更多的是给人一种舒适感,极大的提高了开发效率。最喜欢的效果就是在不刷新页面的前提下可以更新部分页面。想想要是一个庞大的项目每一次操作都要重新加载页面那是一个多大的工程啊。 很多人在选择工具的时候回考虑很多问题,对比各种框架。其实有时候能更好的完成目标应用的就是最好的!