脚本宝典收集整理的这篇文章主要介绍了React学习笔记 - 组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件化是前端框架一个重要的思想,也是让我们偷懒的一个方法之一,?。
想象我们在写前端页面的时候,页面中的有些元素肯定是会被重复使用的。那么我们需要把这些元素打包成一个东西来重复使用,那么这个就是组件。
React中组件就是一个函数,它可以接受任意的输入值,我们称之为PRops
。
React中定义组件的方式有两种,一种是javascript函数,一种是ES6 class的方式
组件的创建
javascript functiond的形式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>
}
ES6 class 的形式
@H_304_61@class Welcome extends React.Component {
render(){
return <h2>Hello, {this.props.name}</h2>
}
}
组件的渲染
前面提到的React元素都是DOM标签,然而React元素也可以是用户自定义的组件。
const element = <Welcome name="sara" />
当React遇到用户自定义的组件的时候,他会将JSX属性作为单个对象props传递给该组件。例如:
function Welcome(props) {
return <h2>Hello, {props.name}</h2>
}
const element = <Welcome name="sara" />
ReactDOM.render(
element,
document.getElementById('root')
);
组件树
一个组件可以在它的输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。
在一个React应用程序中,顶部是一个App组件,下面则是不断抽象的子组件,呈现树装结构。
Props的只读性
React组件中传入的props是只读的,不能对其进行修改。
但是应用的界面是随着时间动态变化的,组件需要动态变化则应该这么弄呢?
以上是脚本宝典为你收集整理的React学习笔记 - 组件全部内容,希望文章能够帮你解决React学习笔记 - 组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。