react入门——Component化相关整理

我曾经一度的质疑，为什么要使用框架，使用框架（react）不仅增加了我的前端学习曲线的斜率，而且在使用过程中，并没有觉得方便，反而是各种束缚各种坑。直到我拿到了别人的react代码才大概懂了，框架的存在就是以牺牲简洁性和灵活性来获得更好的维护性和规范性。

组件化

组件化是react的重要特性之一，这里把我的总结分享给大家。

• 什么是组件化？

我们都知道人体是由细胞构成的，这个概念你自己想想就好，如果医生也这么定义的话，这个世界上估计就没有医生了（因为太复杂了）。医学上将人体的不同部分的细胞分门别类，有肌肉组织，脂肪组织等等，然后根据不同的区块来确认病原以及治疗方法。
前端代码也是一样，把代码放在一起不仅不好维护，甚至连写的人都会因为不停地翻上翻下而筋疲力竭。因此组件化极为必要。

• react中的组件——Component

react允许自己定义组件，这个得益于JSX，组件可以自己加键值对，然后通过this.props进行调用。这么讲太生硬，来点生动的。

• 交互代码如下：

App.jsx

    import React, { Component } from 'react';
    import './App.css';
    import TodoInput from './TodoInput';
    import TodoItem from './TodoItem';
    import 'normalize.css';
    import './reset.css';

    class App extends Component{
        constructor(props){
            super(props)
            this.state = {
                newTodo: '啊，藏得整么深还是被发现了啊啊啊啊',
                todoList: []
            }
        }
        render(){
            return (
                

                        
                
            )
        }
    export default App;

TodoList.jsx

    import React, { Component } from 'react';

    export default class TodoInput extends Component{
        render(){
            return 
            //onKeyPress是input标签中的必须的内置的
        }
        submit(e){
            if(e.key === 'Enter'){
                this.props.onSubmit(e);
            }
        }
        changeTitle(e){
            this.props.onChange(e)
        } 
    }

解说流程：

1. App对象继承自react的component父对象（这是规定，别问我为什么）；
2. constructor()函数初始化props和state；
3. render()函数开始进行渲染：
   1. 渲染是一个输入框组件，这个组件是我自己定义的哈，HTML中可没有的。
   2. 这个输入框的实体在TodoList.jsx文件中，跟App的前期流程相同，他的render()函数返回真正的HTML标签：。
   3. 标签中有三个键值对，我以第二个为例。当输入框被被敲回车时，执行submit()函数：当回车按下就执行this.props.onSubmit。由此就像回城跳转一样跳到了App.jsx文件中，this.props就相当于中包含键值对的对象，则this.props.onSubmit就是执行键值对对象中的onSubmit，则获取到this.state对象中的newTodo，于是就获取到字符串“啊，藏得整么深还是被发现了啊啊啊啊”。

不愿意听我白话想自己看文档的，点击这里！

the end