react笔记02(组件三大属性之一props属性,自定义组件)

1,自定义组件(Component)

        1)react的核心语法和概念       调试工具安装

        2)作用类似于angular中自定义标签指令

        3)组件的2个基本概念

                  组件类(工厂函数/构造函数/类):MyComponent

                  组件标签:<MyComponent/>

        4)定义组件类

                    方法1 :工厂(无状态)函数

                    function MyComponent1(){

                        return   <h1>自定义组件标题</h1>

                    }

                    方式2 :ES6类语法(复杂组件,推荐使用)

                    class MyComponent2  extends React.Component{

                        render(){

                            return <h1>自定义组件标题</h1>

                        }

                    }

                    方式3 : ES5老语法

                    var MyComponent3 = React.createClass({

                        render(){

                            return <h1>自定义组件标题</h1>;

                        }

                    });

        5)渲染组件标签

                ReactDom.render(<MyComponent/>,document.getElementById(‘example’));

                注意:

                    1返回的组件类必须首字母大写

                    2 虚拟DOM元素必须只有一个根元素

                    3虚拟DOM元素必须有结束标签

        6)  ReactDom.render()渲染组件标签的基本流程

                1 React内部会创建组件实例对象

                2 得到包含的虚拟DOM并解析为真实DOM

                3 插入到指定页面元素内部


2,组件3大属性之一:props属性

    1)每个组件对象都会有props(properties的简写)属性

    2) 组件标签的所有属性都会保存在props中

    3) 内部读取某个属性值: this.props.propertyName

    4)   作用:通过标签属性从组件外向组件内传递数据(只读)

    5) 对props中的属性值进行类型限制和必要性限制 使用 PropTypes 进行类型检控制台报错解决措施    

            Person.propTypes = {

                name: React.PropTypes.string.isRequired,

                age:   React.PropTypes.number.isRequired

            }

    6) 扩展属性:将对象的所有属性通过props传递

            <Person  {...person} />

    7) 默认属性值

            Person.defaultPros = {

                    name : "帅明"

              }

    8)组件类的构造函数

                constructor(props){

                    super(props);

                    console.log(props); //查看所有属性

                }

        super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

        ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,885评论 0 24
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,849评论 0 1
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,292评论 2 21
  • 深度工作 深度工作的意义 原则一选择你的哲学理念,即,选择适合自己的深度理念,1.禁欲式-完全摒弃干扰因素,隐居,...
    Joy_wsj阅读 186评论 0 0