React 开发工作流程
前言
最近在工作中频繁的使用react，在需求不断迭代的后，慢慢的发现改的内容变得没那么容易。
比如说：当你实现一个表单的功能，突然要新增一个侧边栏，侧边栏是个table，要求你选择不同的行显示不同的表单数据，之后又加多了个下拉框。这个时候就会体现出一个问题，state的值只在当前table表格组件中，如果你要共享到侧边栏组件，这个时候就用到了redux或者content这种状态提升,这样代码会变得异常繁琐，且state值量一旦多，便不好控制，也会影响性能。
归根结底，是对react的开发流程并没有很好的理解，在读到最新的react-hook文档中，我发现了一些开发思路，并加以总结。
开发的5个步骤
1.UI图拆解成层次结构
2.书写静态页面
3.分析界面功能哪些需要state
4.在合适的组件中放置state
5.添加相关事件逻辑
步骤1: UI图拆解成层次结构
如图所示，根据设计的UI图，我们实现组件单一原则是比较常见的一种方案：
组件单一原则，即组成部分应该只做一件事。如果需求增加，则应将其分解为更小的子组件。如果组件使用重复的技术我们应当考虑他复用性的问题。
步骤2:书写静态页面
现在有了组件层次结构，写静态页面我们不需要过多的思考，只是要写很静态代码，但是写逻辑交互事件就需要我们花大量时间去思考的。而且写静态页面我们不应增加相关state的状态。
要构建一个静态页面去渲染遍历你的dataSource，你应该观察,是否可以构建复用其他组件。
通过从层次结构,一般构建都是“自上而下”的开发项目,也有从“自下而上”这种一般适用于大型项目。
步骤3:分析界面功能哪些需要state
是否需要state我们要根据三个方面去考虑:
- 变量会随着时间的推移保持不变吗? 如果是这样，那就不是
state。 - 变量是通过
props从父组件那里传递过来的吗? 如果是这样，对于接受的子组件来说就不是state。 - 你能根据组件中的现有
state或props来改变变量吗? 如果是这样，它肯定不是state。
现在考虑这个页面中的可能存在数据处理的地方：
search输入: 是state， 因为search需要人为改动,会随着时间改变。checkbox选中与不选中: 是state，因为checkbox需要人为改动,会随着时间改变。- 产品的原始数据:不是
state，因为他都是通过props值改变。 checkbox和search过滤产品的原始数据，不是state，虽然他会随着时间的改变,但是他可以通过现有的state或props改变它，所以它也不是state。
步骤4:在合适的组件中放置state
确定好哪些需要state后,我们要对state进行放置。
根据state确定每个渲染的组件。在层次结构中找到它们最近的公共父组件。决定该state应该位于何处:通常，您可以将该state直接放入它们的共同父节点中。您还可以将state放到某个高于它们共同父组件的组件中。
这样做的好处是: 如果你把当前的state放在属于自己的组件，万一同类的兄弟组件需要控制你当前的组件state，你的代码写起来将会异常困难，万一这种情况一旦多起来，就会变得很难去维护。
虽然可以有redux这类处理方案，但是把state放置他们共同父组件上才是最佳的解决方案。
步骤5:添加相关事件逻辑
改变事件的状态都在search和checkbox这类子组件上，而state的状态在父组件中。怎么办？
如果以前的class写法，会选择用状态提升的方案去解决，就是父类写方法,通过props传给子组件去调用该方法。
hooks中的useState中有setState，因为它本身就是对state处理的方法，所以可以直接通过props传给子组件,子组件去触发。
在SearchBar内部，您将添加onChange事件处理程序，并从事件处理程序执行setState
结尾
至此关于react的开发工程流程就暂告一段落。
谢谢观看。
