react入门系列之react特点归纳

声明式开发

• 命令式开发：原生js和jq写代码的时候，大部分代码都是在操作dom，这种开发模式就是命令式开发。
• 声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。

可以和其他框架并存

• react所控制的dom就是id为root的dom，页面上的其他dom元素你页可以使用jq等其他框架。所以react是可以和其他框架并存的。

组件化

• 在我们写todo-list的时候，我们已经使用react的组件了。通过继承react的Component去创建一个组件。

单向数据流

• react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。否则会报错。（cannot assign to read only property ‘xxx’ of object ‘#object’）
• 子组件要传值给父组件，或者要修改父组件的代码，都是要通过父组件传递过来的方法去实现。
• 这样的好处在于，让数据清晰代码容易维护，如果每个子组件都能直接修改父组件的数据，当子组件躲起来代码维护起来很麻烦。

react是视图层框架

• 结合上面讲的单向数据流，如果是大型项目，非常多的子组件，要修改一个公共的参数，就需要很多层的传递才能完成一个数据变更。
• 单单react去做大型项目是不够的，他优势在于视图层的渲染，涉及到复杂的数据传递，还需要结合其他数据层的框架开发。如mox-box，redux。

函数式编程

• react项目中大部分都是函数，连html都是由render函数去实现的。
• 他的优势在于，方便代码维护，复杂的函数可以拆分成多个函数。
• 在前端自动化测试也很方便，只需要给函数一个参数，看他的输出就可以了。

react开发调试工具

• react Developer Tools (需要FQ，在谷歌浏览器应用商店)

propTypes 与 DefaultProps

• value: PropTypes.string.isRequired --> value是父组件传递过来的参数，子组件规定value必须是字符串，并且必须传递（isRequired）
• deletItem: PropTypes.arrayOf(PropTypes.string,PropTypes.func) --> deletItem必须是方法，或者字符串
• 更多类型参考官方文档 -->这里就不留地址了，留地址会被锁定。

import React, {Component, Fragment} from 'react';
import PropTypes from 'prop-types'; //引入propTypes
class Item extends Component {
    deletItem = () => {
        const { deletItem, index } = this.props;
        deletItem(index);
    }
    render(){
        const { value } = this.props
        return(
            <Fragment>
                <div
                onClick = {this.deletItem}
                >
                {value}
                </div>
            </Fragment>
        )
    }
}
Item.prototypes = {
    test: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,//定义传递过来的value参数必须是字符串
    deletItem: PropTypes.arrayOf(PropTypes.string,PropTypes.number),// 必须是方法或者字符串的数组
    deletTtem: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
     ]),// 必须是这些类型的中的一个。
    index: PropTypes.number // 必须是数字
}
Item.defaultProps = {
    test: 'defaultProps' // 为test设置默认值，如果没有传入test，就使用这个默认值
}
export default Item

Props，State 与 Render 函数之间的关系

• 数据变化为什么视图会变化？
• react的视图是通过Render函数去渲染的，组件当中，如果Props或者State有变化，Render函数就会重新执行一次。
• 父组件的Render重新执行，对应的他的子组件中的Render也会重新执行。