4.React的组件化编程

Posted Eric的前端那些事

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了4.React的组件化编程相关的知识,希望对你有一定的参考价值。

来了,坐

还没有关注Eric君的小伙伴


在上一篇中,我们分析了一下JSX究竟是进步还是退步,答案是:进步,然后一起学习了一下JSX语法,内容不难,希望小伙伴们好好掌握喔!
在“为什么要学习React”这一篇中,我们提到过React的核心特点,不知道各位小伙伴还记得吗?其中有一条就是“ 组件化 ”,那么,今天我们就来学习一下React的组件化编程吧!


4.1 React组件的书写形式

React的组件有两种创建的方式,一种是利用 构造函数 创建,而另一种是利用 class关键字 创建(看见class,学过Java、C++的小伙伴是不是觉得很亲切啊4.React的组件化编程

1.利用构造函数创建组件

假设Eric君现在要定义一个叫Eric的组件,那么如何利用构造函数创建这个组件呢?且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> //1.利用构造函数创建组件 function Eric() { return( <div> <h2>我是Eric君,喜欢我的点个关注喔</h2> <img src="img/eric.jpg" width="200"/> </div> ) }
//实例化 ReactDOM.render( <Eric/> ,document.getElementById('app'))</script></body></html>

4.React的组件化编程

上面我们定义了一个叫做Eric的组件(Eric君又自恋了哈4.React的组件化编程),是不是很简单呢。但是大家有没有发现有什么问题呢4.React的组件化编程?好了,不卖关子了,步入正题哈,不难发现,有没有发现Eric君创建的组件里面的内容都是静态的,也就是写死的,如果需求变了,岂不麻烦大了。
所以,一个重要的角色登场了,它就是props,用来实现组件之间的参数传递。且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> //1.构造函数创建组件(组价之间传递参数--通过props) function Eric(props) { return( <div> <h2>我叫:{props.name}, 性别:{props.gender}, 我有3个爱好:{props.hobbies}</h2> <img src="img/eric.jpg" width="200"/> </div> ) }
//实例化 ReactDOM.render( <Eric name="Eric" gender="男" hobbies={['吃', '睡', '浪']}/> ,document.getElementById('app'))</script></body></html>

4.React的组件化编程

同样的Eric组件,但是这次我们并没有写死组件的内容,而是利用props接受来自父组件传递下来的信息,是不是让组件“活”了哈4.React的组件化编程
上面我们定义了单个组件,那么组件内能不能继续调用组件,也就是复合组件,答案当然是可以的啦,且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> //1.复合组件 function Name(props) { return <p>我叫:{props.name}</p> }
function Gender(props) { return <p>我是:{props.gender}</p> }
function Hobbies(props) {        return <p>我有3个爱好:{props.hobbies}</p> }
function Eric() { return ( <div> <Name name="Eric"/> <Gender gender="男"/> <Hobbies hobbies={['吃', '睡', '浪']}/> </div> ) }
//实例化 ReactDOM.render( <Eric/> ,document.getElementById('app'))</script></body></html>

4.React的组件化编程

其实,说白了,复合组件就是组件中调用组件(别在意Eric君的爱好哈,哈哈4.React的组件化编程
看完了利用构造函数创建组件,也没想象的那么复杂哈,那么,接下来,我们来看看如何利用class关键字创建组件。


2.利用class关键字创建组件

与上述一样,Eric君现在依然要定义一个Eric组件,那么,如何利用class关键字创建这个组件呢,且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> class Liao extends React.Component{ render(){ return ( <div> <h2>我叫:{this.props.name}, 性别:{this.props.gender}, 我有3个爱好:{this.props.hobbies}</h2> <img src="img/eric.jpg" width="200"/> </div> ) } }
ReactDOM.render( <Liao name="Eric" gender="男" hobbies={['吃', '睡', '浪']}/> ,document.getElementById('app'))</script></body></html>

4.React的组件化编程

看,和利用构造函数实现相同的效果哦,这里要注意一点,在利用构造函数创建组件的时候,用props接受外界传进的参数,而利用class关键字创建组件是,如果要接受外界的参数,需要用到this.props。注意两种方法的区别,切记切记4.React的组件化编程
那么,可能有小伙伴要问了,既然Eric君你说构造函数和class关键字都可以用来创建组件,那么我们实际开发中,具体用哪一个呢?
敲黑板了哈,答案是: 首选利用class关键字 ,别问为什么,Eric君也不知道,哈哈4.React的组件化编程


4.2 state的使用

上面Eric君分别用了构造函数的方法以及class关键字的方法创建了一个组件,而且详细分析了组件间参数的传递,即利用props接受父组件的参数。
那么,现在问题又来了,可能有小伙伴问,Eric君你说利用props接受来自父组件的参数,那如果组件本身就有参数呢,这个时候该怎么办呢?此时就要看state了。且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> //1.创建组件类 class Eric extends React.Component{ constructor(props){ super(props); //2初始化状态 this.state = { name: 'Eric', gender: '男', intro: 'Eric的前端那些事' } }
render(){ const {name, gender, intro} = this.state; return ( <div> <h3>我叫:{name}, 性别:{gender}, 代表作:{intro}</h3> <button onClick={()=>this.dealClick()}>换一个</button> </div> ) }
dealClick(){ this.setState({ name:'萨顶顶', gender: '女', intro:'左手指月' }) } }
//3.渲染到DOM容器中 ReactDOM.render( <Eric/>, document.getElementById('app') )</script></body></html>
上面代码,可能就有小伙伴已经懵了哈,不急,且看Eric君如何操作。
上述代码大部分其实我们都见过,只有几点不同:
  • constructor:俗名构造器,主要可以用来放置组件内部参数state,其中super(props)表示继承,而组件内的参数定义通过this.state。

  • 上述的button是用来点击切换状态的,即事件处理函数,其中()=>是ES6语法,俗称箭头函数(关于ES6语法,Eric君后续会专门开一个专题来讲,不急哈4.React的组件化编程

  • this.setState是用来改变state状态的

那么上面的代码,小伙伴知道是什么意思了吧,大家心里想一下喔,看是否与运行结果一致4.React的组件化编程

4.React的组件化编程

图1 点击前

4.React的组件化编程

图2 点击后

结果就是这样哈,当点击发生的时候,通过this.state改变了原来的state状态,然后页面就更新了,从这里可以得知一点,也是React的核心— 状态决定页面。


4.3 state和props的区别

state和props的区别,一句话就可以概括,那就是: state用来设置组件本身状态,而props用来接收外界传入的参数
语言太干瘪,我们还是看一个综合示例,一切就豁然开朗了,且看代码4.React的组件化编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>
<script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/prop-types.js"></script><script src="../js/babel.min.js"></script><script type="text/babel"> //1.定义一个Eric组件 class Eric extends React.Component{ constructor(props){ super(props); //2.初始化state this.state = { age: 1, friends:[] }; } //3.设置props属性的默认值 static defaultProps = { name: '小苏', gender: '男' }; //4.设置props属性的类型(约束属性类型) static propTypes = { name: PropTypes.string.isRequired, //必须是字符串且一定要传的 gender: PropTypes.string };
render(){ const {name, gender} = this.props; const {age, friends} = this.state; return ( <div> <p>小名:{name}, 性别:{gender}</p> <p>我今年{age}岁了</p> <p>我有很多朋友:</p> <ul> {friends.map((friend, index)=>( <li key={index}>{friend}</li> ))} </ul> <button onClick={()=>this.addAge()}>点击</button> </div> ) } addAge(){ //1.增加朋友 let tempArr = this.state.friends; tempArr.push('朋友' + Math.floor(Math.random() * 100));
//2.更改状态 this.setState({ age: this.state.age + 1, friends: tempArr }) } }
//5.渲染到DOM容器中 ReactDOM.render( <Eric name="Eric" gender="男"/>, document.getElementById('app') )</script></body></html>

4.React的组件化编程

图1 点击前

4.React的组件化编程

图2 点击5次

上述代码大部分我们也见过,有几点需要指出:
  • static defaultProps:这个是用来设置props所接收参数的默认值,主要是为了防止当父组件没有传值的时候,可以使用定义的默认值,避免报错

  • static propTypes:这个是用来设置props所接收参数的具体类型,当只有传入的类型与static propTypes定义的一致才可以使用,否则将会报错


4.4 总结

今天,Eric君主要重点讲解了React组件的创建,包括构造函数的创建和利用class关键字的创建,并且,还讲解了组件间参数利用props传递以及组件自身状态state的作用,全程代码驱动,希望小伙伴们能好好消化一下。
好了,我们下期再见,晚安!4.React的组件化编程
4.React的组件化编程喜欢的,点个再看,谢谢大家嘞



码字不易,点波关注


以上是关于4.React的组件化编程的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

底部应用栏在使用片段导航时向上/向下滑动(导航架构组件)

VsCode 代码片段-提升研发效率

使用 Pygments 检测代码片段的编程语言

4-react 组件之间传值。

4-react 组件之间传值。