浅谈React组件
Posted 前端筱园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈React组件相关的知识，希望对你有一定的参考价值。
组件化思想
vue和react都是现在最火的两大前端框架之一，无论是vue，还是react，他们都采用的是组件化的思想。对于一个前端开发人员来说，组件这个词并不陌生，也可以感受到组件所带来的好处与快感。
我就随性的讲讲我个人对组件化思想的看法，组件化并不是前端所特有的，在很多方面都会涉及到。我把它带来的好处分类两个大的方面：
把复杂的问题进行拆分，简化问题
-
提高公共内容的复用性，灵活性
再通俗易懂的来说，就好比搭积木一样，假如我们需要做一个火车模型，我们会在众多的零散的积木零件中，找到所需要用到的零件，然后对他们进行合理的组合，最终拼成我们想要的东西。而不是你需要一个火车，乐高就直接给你做一个火车，你需要一个飞机，又重新给你做一个飞机，遇到一些难缠的甲方，当你给他做了一个飞机后，甲方爸爸觉得某个部位不满意，你又要重新去做一个飞机。如果是使用零散的组件搭建的话，可以对某个局部进行方便快捷的调整。
有了组件化的思想还不够，还要知道如何去划分组件，不是说组件划分的越小越好，在保证组件可以被灵活复用的前提下，减少无用的不必要的组件划分。
vue组件与react组件
在vue中，一个.vue文件就为一个组件，当然对于一个跟组件来说你也可以把它做为一个页面。
-
beforeCreate ：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 -
created ：data和methods已经创建完成，准备编译模板 -
beforeMount ：完成模板编译，但未挂载到页面中 -
mounted ：将模板挂载对应的容器中 -
beforeUpdate ：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 -
updated ：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染 -
beforeDestroy ：实例被销毁之前调用，此时实例还可用 -
destroyed ：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
react组件的生命周期可分为3个状态
Mounting：已插入真实 DOM
Updating：正在被重新渲染
-
Unmounting ：已移出真实 DOM
具有以下方法：
componentWillMount：在渲染前调用,在客户端也在服务端。
componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他javascript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate：在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount：在组件从 DOM 中移除之前立刻被调用。
react组件
-
输入(props)：父组件传递的内容 -
输出(render/return)：返回所需要渲染的内容 状态(state)：可以看做是充当辅助的角色，为了达到所需要的结果所需要的一些必要的中间桥梁，简单说，就是普通的数据
class Component extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 0,
}
}
componentDidMount(){
setInterval(() => {
this.setState({
value: this.state.value + 1
})
}, 1000);
}
render() {
return <div>
<div>
<div>
<h3>函数式组件</h3>
{/*函数式组件*/}
<h3>class组件</h3>
{/*class组件*/}
</div>
</div>
</div>
}
}
//函数式组件
function FunComponent(props){
let {count} = props
let handleClick = () => {
setTimeout(() => {
alert(count)
}, 3000);
}
return (
<div>
<p>当前数量：{count}</p>
<button onClick={handleClick}>Alert Count</button>
</div>
)
}
//class组件
class ClassComponent extends React.Component {
constructor(props){
super(props)
this.state = {
}
}
handleClick = () => {
setTimeout(() => {
alert(this.props.count)
}, 3000);
}
render() {
return <div>
<p>当前数量：{this.props.count}</p>
<button onClick={this.handleClick}>Alert Count</button>
</div>
}
}
<FunComponent>
函数组件中的行为才符合预期。如果将
setTimeout
类比到一次 Fetch 请求，在请求成功时，我要获取的是发起 Fetch 请求前相关的数据，并对其进行修改。
为什么会产生这种差异？
<ClassComponent>
class 组件中，我们是从
this
中获取到的
props.count
。
this
是固定指向同一个组件实例的。在 3 秒的延时器生效后，组件重新进行了渲染，
this.props
也发生了改变。当延时的回调函数执行时，读取到的
this.props
是当前组件最新的属性值。
<FunComponent> 函数组件中，每一次执行 render 函数时，props 作为该函数的参数传入，它是函数作用域下的变量。这样理解，在组件首次被创建时，就相当于调用了一次函数，当count值发生改变后，又一次调用了该函数，每一次调用之间都是相互独立的，而props就是该函数的参数，每个函数在被调用时，它的参数就已经被确定，不会被其他函数所影响。
以上是关于浅谈React组件的主要内容，如果未能解决你的问题，请参考以下文章