React组件
react组件
-
概念
-
类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素
-
-
组件的分类
-
无状态的函数式组件
import React from 'react'; import ReactDOM from 'react-dom'; //组件的名字首字母大写 function AppHeader() { return ( <div className="header"> <h2>头部部分</h2> </div> ) } function AppContent() { return ( <div className="content"> <h3>中间内容部分</h3> </div> ) } function AppFooter() { return ( <div className="footer"> <h2>尾部部分</h2> </div> ) } const element = ( <div> <AppHeader /> <AppContent /> <AppFooter /> </div> ) //============== ReactDOM.render( element, document.getElementById('root') )
-
有参数的函数式组件
import React from 'react'; import ReactDOM from 'react-dom'; function AppCom(props) { return <h2 className={props.name}>{props.name}</h2>; } const element = ( <div> <AppCom name="header" /> <AppCom name="content" /> <AppCom name="footer" /> </div> ) //============== ReactDOM.render( element, document.getElementById('root') )
-
class 类组件
import React from 'react'; import ReactDOM from 'react-dom'; //class组件类,必须继承自React.Component才是一个组件类,否则就是一个普通的类 class AppCom extends React.Component { //如果子类加入了构造函数 constructor,则一定要手动调用父类的构造函数super() constructor(props) { super(props); //React 组件需要通过手动为组件添加state成员来初始化:ViewMode //state等价于Vue中的data,接下来就可以在该组件管理的模板中通过{}来访问绑定数据 this.state = { message: 'hello world' } } //class组件类,必须通过render函数返回组件模板 render() { return ( <div> <h2 className={this.props.name}>{this.props.name}</h2> <div onClick={this.handleClick.bind(this)}>{this.state.message}</div> </div> ); } //handleClick方法里面的this默认是window,而不是实例对象,需要通过方法改变这个this的指向 handleClick(){ //需要修改state里的数据并且希望视图更新,则一定要使用this.setState方法 this.setState({ message: 'good job' }) } } const element = ( <div> <AppCom name="header" /> <AppCom name="content" /> <AppCom name="footer" /> </div> ) //============== ReactDOM.render( element, document.getElementById('root') )
-
-
渲染组件
-
React 元素既可以是 DOM 标签
const element = <div />;
-
React 元素也可以是用户自定义的组件,此时会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”
import React from 'react'; import ReactDOM from 'react-dom'; function AppCom(props) { return <h2>{props.name}</h2>; } const element = <AppCom name="header" />; ReactDOM.render( element, document.getElementById('root') ) /** * 渲染过程: * 1.调用 ReactDOM.render() 函数,并传入 <AppCom name="header" /> 作为参数。 * 2.React 调用 AppCom 组件,并将 {name: 'header'} 作为 props 传入 * 3.Welcome 组件将 <h2>header</h2> 元素作为返回值 * 4.React DOM 将 DOM 高效地更新为 <h2>header</h2> */
-
-
组件使用规范
-
组件名称必须以大写字母开头:React 会将以小写字母开头的组件视为原生 DOM 标签,例如,
<div />
代表 HTML 的 div 标签,而<AppCom />
则代表一个组件,并且需在作用域内使用AppCom
-
组件可以在其输出中引用其他组件,通常来说,每个新的 React 应用程序的顶层组件都是
App
组件。但是,如果你将 React 集成到现有的应用程序中,你可能需要使用像Button
这样的小组件,并自下而上地将这类组件逐步应用到视图层的每一处 -
建议从组件自身的角度命名 props,而不是依赖于调用组件的上下文命名
-
提取组件可能是一件繁重的工作,但是,在大型应用中,构建可复用组件库是完全值得的。如果 UI 中有一部分被多次使用(
Button
,Panel
,Avatar
),或者组件本身就足够复杂(App
,FeedStory
,Comment
),那么它就是一个可复用组件的候选项 -
组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改
//“纯函数”:该函数不会尝试更改入参,且多次调用下相同的入参始终返回相同的结果 function sum(a, b) { return a + b; } //非纯函数,因为它更改了自己的入参 function withdraw(account, amount) { account.total -= amount; }
-
【转载文章务必保留出处和署名,谢谢!】