4.React的组件化编程_vlambda技术博客

vlambda
2020-04-08

4.React的组件化编程

来了，坐

还没有关注Eric君的小伙伴

在上一篇中，我们分析了一下JSX究竟是进步还是退步，答案是：进步，然后一起学习了一下JSX语法，内容不难，希望小伙伴们好好掌握喔！

在“为什么要学习React”这一篇中，我们提到过React的核心特点，不知道各位小伙伴还记得吗？其中有一条就是“ 组件化 ”，那么，今天我们就来学习一下React的组件化编程吧!

4.1 React组件的书写形式

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

）

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

假设Eric君现在要定义一个叫Eric的组件，那么如何利用构造函数创建这个组件呢？且看代码

<!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君又自恋了哈

），是不是很简单呢。但是大家有没有发现有什么问题呢

？好了，不卖关子了，步入正题哈，不难发现，有没有发现Eric君创建的组件里面的内容都是静态的，也就是写死的，如果需求变了，岂不麻烦大了。

所以，一个重要的角色登场了，它就是props，用来实现组件之间的参数传递。且看代码

<!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接受来自父组件传递下来的信息，是不是让组件“活”了哈

。

上面我们定义了单个组件，那么组件内能不能继续调用组件，也就是复合组件，答案当然是可以的啦，且看代码

。

<!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君的爱好哈，哈哈

）

看完了利用构造函数创建组件，也没想象的那么复杂哈，那么，接下来，我们来看看如何利用class关键字创建组件。

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

与上述一样，Eric君现在依然要定义一个Eric组件，那么，如何利用class关键字创建这个组件呢，且看代码

。

<!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。注意两种方法的区别，切记切记

。

那么，可能有小伙伴要问了，既然Eric君你说构造函数和class关键字都可以用来创建组件，那么我们实际开发中，具体用哪一个呢？

敲黑板了哈，答案是：首选利用class关键字，别问为什么，Eric君也不知道，哈哈

。

4.2 state的使用

上面Eric君分别用了构造函数的方法以及class关键字的方法创建了一个组件，而且详细分析了组件间参数的传递，即利用props接受父组件的参数。

那么，现在问题又来了，可能有小伙伴问，Eric君你说利用props接受来自父组件的参数，那如果组件本身就有参数呢，这个时候该怎么办呢？此时就要看state了。且看代码

<!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君后续会专门开一个专题来讲，不急哈）
this.setState是用来改变state状态的

那么上面的代码，小伙伴知道是什么意思了吧，大家心里想一下喔，看是否与运行结果一致

。

4.React的组件化编程

图1 点击前

4.React的组件化编程

图2 点击后

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

4.3 state和props的区别

state和props的区别，一句话就可以概括，那就是： state用来设置组件本身状态，而props用来接收外界传入的参数。

语言太干瘪，我们还是看一个综合示例，一切就豁然开朗了，且看代码

<!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的作用，全程代码驱动，希望小伙伴们能好好消化一下。

好了，我们下期再见，晚安！