乐趣区

关于react.js:从零开始学习React笔记

React 的组件类型能够分为函数式组件和类式组件:

1. 函数式组件是通过定义函数 return 对应 dom 建构并通过 render 函数进行渲染的组件, 通常用于简略组件。其构造如下:

function MyComponent(){console.log(this); // 此处的 this 是 undefined,因为 babel 编译后开启了严格模式
            return <h2> 我是用函数定义的组件(实用于【简略组件】的定义)</h2>
        }
        //2. 渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
            执行了 ReactDOM.render(<MyComponent/>....... 之后,产生了什么?1.React 解析组件标签,找到了 MyComponent 组件。2. 发现组件是应用函数定义的,随后调用该函数,将返回的虚构 DOM 转为实在 DOM,随后出现在页面中。*/

2. 类式组件是通过继承 React.Component 并通过 render 函数进行渲染的组件, 通常用于简单组件。其构造如下:

class MyComponent extends React.Component {render(){
                //render 是放在哪里的?—— MyComponent 的原型对象上,供实例应用。//render 中的 this 是谁?—— MyComponent 的实例对象 <=> MyComponent 组件实例对象。console.log('render 中的 this:',this);
                return <h2> 我是用类定义的组件(实用于【简单组件】的定义)</h2>
            }
        }
        //2. 渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
            执行了 ReactDOM.render(<MyComponent/>....... 之后,产生了什么?1.React 解析组件标签,找到了 MyComponent 组件。2. 发现组件是应用类定义的,随后 new 进去该类的实例,并通过该实例调用到原型上的 render 办法。3. 将 render 返回的虚构 DOM 转为实在 DOM,随后出现在页面中。*/
退出移动版