React 组件

React 组件

React框架是组件化开发，React.js 中一切皆组件，将组件引入文件中就可以当做标签使用，标签使用时可以是单标签也可以是双标签，驼峰命名使用标签可以使用连字符，不再需要注册组件。

定义组件

定义组件需要的基本内容：组件html模板（代表UI结构）、数据和方法。

React定义组件有两种分类：函数组件和class类组件

• 类组件，render函数的返回值作为组件模板

import React, {Component} from 'react';

class MyApp extends React.Component {
    constructor(props){
        // 继承父类
        super(props);
  	}
	render() {
		return (
			<div>
                            <h2>这是标题2</h2>
                            <h3>这是标题2</h3>
			</div>
		);
	}
}
export default MyApp;

在编写 React的类组件的时候，一般都需要继承 React.js 的 Component（类组件的定义）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来，返回并列多个 JSX 元素是不合法的。

• 函数组件，函数的return作为组件的模板

//箭头函数
const MyApp = () => <div><p>这是一个段落</p></div>;
export default MyApp;

//普通函数
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome;

使用组件

import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './js/MyApp.js'; //导入自定义组件

ReactDOM.render(<MyApp />, document.getElementById('root'));

定义复合组件

通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离，可以理解为组件的嵌套

import React from 'react';
import ReactDOM from 'react-dom';
//局部组件Name
class Name extends React.Component {
	render() {
		return (
      		<h1>{this.props.name}</h1>
    	);
	}
}
//局部组件Link
class Link extends React.Component {
	render() {
		return (
      		<h1>{this.props.site}</h1>
    	);
	}
}

class WebSite extends React.Component {
	render() {
		return (
      		<div>
        		<Name name={this.props.name} />
        		<Link site={this.props.site} />
      		</div>
    	);
	}
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<WebSite name="百度一下，你就知道" site='http://www.baidu.com' />
);

Home和Welcome组件都是App组件的子组件

import Home from './home'
//普通函数
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Home />
      <Welcome name="KUGOU"/>
    </div>
  );
}

export default App;