React在开发中的常用结构以及功能详解

Z时代
2024-01-10
分类：综合

react

一.React什么算法，什么虚拟DOM，什么核心内容网上一大堆，请自行google。

但是能把算法说清楚，虚拟DOM说清楚的聊聊无几。对开发又没卵用，还不如来点干货看看咋用。

二.结构如下：

import reqwest from 'reqwest';
import React from 'react';
import ReactDOM from 'react-dom';
var Header = React.createClass({
   handleClick:function(){
     console.log(this.refs.head);
     console.log(ReactDOM.findDOMNode(this.refs.head));
   },
   render:function(){
     return (
      <div style={{ backgroundColor:'blue' }} onClick={ this.handleClick } ref='head'>
        <p>Header组件</p>
      </div>
     )
   }
})
var ComponentDemo = React.createClass({
//默认state
  getInitialState() {
    return {
      current: 1,
      openKeys: [],
      result_data : {}
    };
  },
//默认props
  getDefaultProps() {
      return {
        key:{
          value:2
        }
      };
  },
  //静态方法  调用 ComponentDemo. getBusinessName()
  statics:{ 
     getBusinessName:function(){
       return console.log('getBusinessName方法被调用。。。')
     }
   },
  handleClick(e) {
     console.log('div被点击。。。');
     console.log(this.refs.cct);
     console.log(ReactDOM.findDOMNode(this.refs.cct))
  },
  componentDidMount: function() {
    //异步请求
    reqwest({
      url: 'http://localhost:90/menu',
      method: 'get',
      type: 'json'
    }).then(result => {
      if(this.isMounted()){
        this.setState({
          result_data : result.data
        });
      }
    },function(err, msg){
       console.log(err)
       console.log(msg)
    });
    //使用props
    console.log(this.props.key.value)
  },
  componentWillReceiveProps(nextProps) {
      //接受新的props时候被触发
  },
  render() {
    return (
      <div>
          <Header ref='cct'/>
          <div style={{ height:'100%',width:200 }} className='btn'  onClick={ this.handleClick }>CCT部分</div>
      </div>
    );
  }
})
ReactDOM.render(<ComponentDemo />,
document.getElementById('contain'));

这个例子中涉及了开发中常用的几个知识点。

1.improt 这样的引入方式是es6的语法，也可require

2.Header是个组件，组件的创建使用React.createClass({}),es6也还有别的写法，反正我是用不惯

3.每个组件都需要一个render函数，return中只能包含一个顶层标签，我们一般用div来包裹。且组件名称应该大写开头。

4.refs的属性可以帮助我们突破虚拟DOM的限制，可以获取到DOM结构，但是不要使用中文网上的类似:this.refs.xxx.getDOMNode()，因为这样的写法已经不被支持。

this.refs.XXX的写法是用来获取react结构的。

我们应该使用react-dom提供的专门操作DOM的方法：ReactDOM.findDOMNode(this.refs.XXX)。

this.refs.XXX与ReactDOM.findDOMNode(this.refs.XXX)是不同的，虽然有时候我们打印出来的有时会相同。

5.当然，react最核心的就是一个状态机。getInitialState(只会在组件初始化的时候调用一次)就是用来初始化状态的，我们可以通过this.setState()来修改状态。状态的每次修改都会出发render函数。

6.getDefaultProps这个函数可以帮助我们设置一个不变的数据结构，以便取用。相当于定义了一个常量。

7.statics就是用来顶一个静态方法的，我们可以定义各种函数，并通过ComponentDemo. getBusinessName()方式来调用。结构:组件名.函数名

8.最重要的事件机制也是存在的，就像例子中的onClick，大部门事件机制都是支持的。

9.componentDidMount(只会在组件渲染结束后调用一次)这个函数就是跟组件的生命周期相关了。我们一般在里面会进行异步的请求之类的操作。

componentWillMount(只会在组件执行初始化渲染之前调用一次)刚好跟上面的相反。

还有其他的几个，个人理解为组件进入，开始，离开的钩子。

shouldComponentUpdate(object nextProps,boject nextState) (在函数有新的props或state的时候触发)这个钩子会主要管理组件是否更新的，返回的是个布尔值。默认是true，一般不建议使用。

10.组件肯定也少不了css的润色。但是这里添加style必须以对象的形式写，如果是数字的话，默认单位是px。

其他的属性必须用驼峰格式：style={{ backgroundColor:'red' }}；

class必须写成className。

11.isMounted()是用来判断组件是否已经插入DOM。一般请求后强烈建议在判断是否插入DOM后，再来修改state。

绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。
setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。
不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。
setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。