自学react（下）

最新推荐文章于 2025-07-03 15:58:36 发布

原创最新推荐文章于 2025-07-03 15:58:36 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #生命周期 #组件 #State #方法

React 专栏收录该内容

2 篇文章

订阅专栏

首先，我们要说几种方法：

1.和状态有关的：

React把组件看成是一个状态机，只需要更新组件的state，然后根据新的state重新渲染界面（不操作dom）；

setState：设置状态；

replaceState：替换状态；

不能用this.state来修改状态，不过可以通过this.state来读取，this.setState方法就修改状态值，每次修改之后就会自动调用this.render方法，再次渲染组件。

和属性有关：

SetProps：设置属性；

replaceProps：替换属性；

react有两个类似的方法 props和state，其中props是不可变的，而state可以根据用户交互来改变（this.props.name和this.state.name）

props可以通过getDefaultProps()方法为props设置默认值。在React.createClass（{

getDefaultProps：function（）{

return{

name:”XXXX”

}}}）

props验证使用propTypes

强制更新：forceUpdate；

一般来说，当组件重新渲染的时候也会读取this.state和this.props如果说状态没有改变的话，就会之更新dom。forceUpdate这个方法会通知react需要调用render，但是并不是很推荐使用这种方法。这样的话就可以仅仅从this.state和this.props中读取状态触发render（）调用。

获取dom节点：findDOMNode；

如果说组件已，经挂在到dom中就会返回对应的dom元素，当render返回的是null或者是false时，findDOMNode就也返回null；

PS：

这里要说一下，组件获得的并不是真正的dom节点，而是在内存中的数据结构，是一种虚拟的dom，当他插入文档的时候才会变成真正的dom节点。首先现将所有的dom变动都现在虚拟的上进行，然后再将实际发生变动的部份反应都真实的dom上（其中有一个算法 dom diff，可以极大地提升网页的性能）

判断组件挂在载情况：isMounted：

这个可以用来判断组件是不是已经挂载到dom中了，返回的是true和false。

React组件生命周期，

就是说三个状态，五种函数处理方法。

Mounting（已插入真实的dom），

updating（正在被重新渲染的），

UnMouning（移出真实的dom）

每个状态来说都有两种处理will和did。顾名思义，一个是进入状态之前，一个是进入状态之后。（就是把那两个单词往里面加就行，所以你就记住三个方法就差不多了）。

componentWillMount();

componentDidMount();

componentWillUpdate();

componentDidUpdate();

componentWillUnmount();

以上是在用的时候需要记住的部分，其他的方法什么的看看api用的时候再看看比较好，毕竟不用也记不住。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
</head>
<body>
<div id="exam"></div>
<script type="text/babel">
    var Hello=React.createClass({
        getInitialState:function(){
            return {
                opacity:1.0
            }
        },
        componentDidMount:function(){
            this.timer=setInterval(function(){
                var opacity=this.state.opacity;
                opacity -=.05;
                if(opacity<0.1){
                    opacity=1.0;
                }
                this.setState({
                    opacity:opacity
                })
            }.bind(this),100)

        }
        ,
        render:function(){
            return (
                    <div style={{opacity:this.state.opacity}}>
                        Hello {this.props.name}
                    </div>
            )
        }
    })
    ReactDOM.render( <Hello name="world"/>,
    document.getElementById("exam"))

</script>
</body>
</html>

上面是我插入的一个小例子。主要是用一下这两篇文章中的东西，插入文件，定义方法（render一定要有的）。React.createClass来创建组件。ReactDOM.render来用。将其呈现到id名字是exam的div中。这里面的感觉就像是vue一样都是

<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

感觉上都是先定义了一块元素区域用来显示（div）。之后在固定一个方法里面用对象的形式来定义方法和值。所以还是觉得框架你在最开始学习的时候深入研究一个，达到一个可以用它来开发的时候，别的形式的也会有到大同小异的地方。学起来会先对容易些。。。

下次要说说前端的框架有哪些，框架的作用。能知道的都要去了解写一下。。古德拜