新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下React创建组件的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、成都西信服务器托管、云服务器、虚拟主机、网站系统开发经验,已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机、域名与空间、VPS主机、云服务器、香港云服务器、免备案服务器等。
组件(Components) 让你可以将用户界面分成独立的,可复用的小部件,并可以对每个部件进行单独的设计。
从定义上来说, 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”), 并返回 React 元素,用以描述屏幕显示内容。
Props , 即属性(Property), 在代码中写作 props,故可用 props 指代 properties。
react中有两种组件:类组件(class components)、函数组件(function components)
类组件的定义有如下要求:
类组件需要继承自 React.Component
类组件必须实现render函数
在ES6之前,可以通过create-react-class 模块来定义类组件,但是目前官网建议我们使用ES6的class类定义。
使用class定义一个组件:
class App extends Component { constructor() { super() this.state = {} } render() { returnHello App
} }
我们来详细分析一下类组件有哪几个部分
constructor:这是类组件的构造函数,是可选的,我们通常在constructor中初始化一些数据;
this.state:我们在constructor中给类组件加入state属性,你可以理解为组件中有一个state对象,其中包含着各种属性,用于维护组件内部的数据。同时你可以通过this.state.<属性名>访问该属性;
render(): 该方法是 class 组件中唯一必须实现的方法,类组件通过render()返回组件的显示内容;
我们可以通过this.state给类组件添加数据对象,我们可以通过this.state.<属性名>去访问我们setState中的属性。
constructor(props) { super(props); this.state = { name:"xhs-rookies" } } render(){ return{this.state.name}
}
但是我们想要修改上述例子中的name属性的时候,则必须通过react给我们规定好的setState()方法,去给state添加或者修改其中的数值。
this.state.name = 'new xhs-rookies' //错误的方式,不允许采用 this.setState({ name: 'new xhs-rookies' }) //正确的方式
简单点来说,在 react 中页面是通过数据进行渲染,使用setState()更新的数据,react 会帮我们执行render()去更新页面,从而将页面中用到 state 中的数据全部更新。
当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回很多类型,很多时候我们选择让该方法返回 React 元素,然后交由 React 去渲染展示:
React 元素:
通常通过 JSX 创建。
例如,
会被 React 渲染为 DOM 节点,无论是
还是详细关于 render() 方法的内容请见React.Component - Render)
函数组件是使用 function 来进行定义的函数,只是这个函数会返回和类组件中 render 函数返回一样的内容。
跟类组件相比,函数组件有自己的特点:
没有生命周期,也会被更新并挂载,但是没有生命周期函数;
没有 this(组件实例);
没有内部状态(state);
我们来定义一个函数组件:
export default function App() { returnxhs rookies}
在前几篇中, 我们只遇到代表 DOM 标签的 React 元素:
const element =
然而,元素也可以代表用户定义的组件:
const element =
当 React 遇到一个代表用户定义组件的元素时,它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。
比如, 以下代码在页面上渲染“xhs rookies”:
function Welcome(props) { returnHello, {props.name}
} const element =ReactDOM.render(element, document.getElementById('root'))
我们简单解释一下上面这个例子:
我们调用了 ReactDOM.render() 方法并向其中传入了
React 调用 Welcome 组件,并向其中传入了 {name: 'xhs rookies'} 作为 props 对象。
Welcome 组件返回
React DOM 迅速更新 DOM ,使其显示为
注意: 组件名称总是以大写字母开始。
举例来说,
代表一个 DOM 标签,而你可以深入 JSX阅读更多关于这点背后的原因。
组件可以在它们的输出中引用其它组件。这使得我们可以使用同样的组件来抽象到任意层级。一个按钮,一个表单,一个对话框,一个屏幕:在 React 应用中,所有这些都通常描述为组件。
例如,我们可以创建一个 App 组件,并在其内部多次渲染 Welcome:
function Welcome(props) { returnHello, {props.name}
} function App() { return () } ReactDOM.render(, document.getElementById('root'))
通常,新的 React apps 都有一个单独的顶层 App 组件。然而,如果你在已有的应用中整合 React,你可以需要由下至上地, 从类似于 Button 这样的小组件开始, 逐渐整合到视图层的顶层。
不要害怕把一个组件分为多个更小的组件。
举个例子,思考下名 Comment 组件:
function Comment(props) { return () }{props.author.name}{props.text}{formatDate(props.date)}
它接受 author(一个对象),text(一个字符串)和 date(一个日期)作为 props。
这个组件修改起来很麻烦,因为它是被嵌套的,而且很难复用其中的某个部分。让我们从其中提取一些组件。
首先,提取头像 Avatar:
function Avatar(props) { return }
Avatar 组件不用关心它在 Comment 中是如何渲染的。这是为什么我们它的 prop 一个更通用的属性名: user, 而不是 author 的原因。
我们建议从组件本身的角度来命名 props 而不是它被使用的上下文环境。
我们可以稍微简化一下 Comment 组件:
function Comment(props) { return () } {props.author.name}{props.text}{formatDate(props.date)}
接下来,我们提取用户信息 UserInfo 组件, 用于将 Avatar 显示在用户名旁边:
function UserInfo(props) { return () } {props.user.name}
这使我们可以进一步简化 Comment 组件:
function Comment(props) { return () } {props.text}{formatDate(props.date)}
提取组件可能看起来是一个繁琐的工作,但是在大型的 Apps 中可以回报给我们的是大量的可复用组件。一个好的经验准则是如果你 UI 的一部分需要用多次 (Button,Panel,Avatar),或者本身足够复杂(App,FeedStory,Comment),最好的做法是使其成为可复用组件。
无论你用函数或类的方法来声明组件, 它都无法修改其自身 props. 思考下列 sum (求和)函数:
function sum(a, b) { return a + b }
这种函数称为 “纯函数” ,因为它们不会试图改变它们的输入,并且对于同样的输入,始终可以得到相同的结果。
反之, 以下是非纯函数, 因为它改变了自身的输入值:
function withdraw(account, amount) { account.total -= amount }
虽然 React 很灵活,但是它有一条严格的规则:
注意: 所有 React 组件都必须是纯函数,并禁止修改其自身 props 。
当然, 应用 UI 总是动态的,并且随时有可以改变。
如果我们想要动态改变 UI,那么就会涉及到我们上面说到的state(状态) 。我们通过动态的改变state来渲染整个页面,我们后面会提及。
以上就是“React创建组件的方法”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。