React 面向组件编程

React 函数式组件

• 创建函数式组件

function MyComponent() {
    console.log(this); // 此处的 this 是 undefined，用为 babel 编译后开启了严格模式
		return <h2>我是函数定义的组件(适用于简单组件的定义)</h2>;
	}

• 渲染组件到页面

ReactDOM.render(<MyComponent />,document.getElementById('test'));

• 执行了ReactDOM.render(<MyComponent />,......);发生了什么？
  1. React 解析组件标签，找到了 MyComponent 组件
  2. 发现组件是函数定义的，随后调用该函数，将返回的虚拟 DOM 转为 真实 DOM，随后呈现在页面中

注意

• 函数首字母必须大写
• 函数必须有返回值
• 标签必须闭合

类式组件

• 创建类式组件

class MyComponent extends React.Component {
		render() {
		// render 是放在 MyComponent 的原型对象上,供实例使用
		console.log(this); //render 中的 this 是 MyComponent (组件)实例对象
			return <h2>我是类定义的组件(适用于复杂组件的定义)</h2>;
		}
	}

• 渲染组件到页面

ReactDOM.render(<MyComponent />,document.getElementById('test'));

• 执行了ReactDOM.render(<MyComponent />,......);发生了什么？
  1. React 解析组件标签，找到了 MyComponent 组件
  2. 发现组件是类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法
  3. 将render返回的虚拟 DOM 转为 真实 DOM，随后呈现在页面中

注意

• 类首字母必须大写
• 函数必须有 render 方法
• 标签必须闭合