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

32次阅读

共计 930 个字符，预计需要花费 3 分钟才能阅读完成。

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，随后出现在页面中。*/

正文完