react展示数据

Posted 2020-08-31 此生依然

react做得最好的事，就是配合UI展示数据，通过调用接口，如果返回的数据发生改变，页面展示的数据会自动地发生改变。

 

react可以使用jsx语法，允许在js代码中直接写html标签，并且在节点上直接绑定数据，在父级和子级之间的同信时，使用props进行通信。props是properties的简写。

为什么react使用jsx更好，请查看http://reactjs.cn/react/docs/jsx-in-depth.html

 

react的组件其实很简单，可以简单的理解它就是一个函数，通过props和state来渲染页面。

在页面中存值除使用var, es6的let,const等方法还有两种方式，一个是直接绑定到this上面，还有一个是绑定在this.state,它们的区别就是，直接绑定在this上面的数据不能让页面重新渲染，对那些对页面显示没影响的数据、方法等，可以直接绑定在this上面，如果数据发生改变后，需要在页面上面重新显示，就需要绑定在this.state上面了，通过this.setState({})，重新设置了要显示的值后可以使页面重新渲染。在后面的学习部分详细再解释。

 

特别需要注意的是： react的一个组件，一次只会渲染一个根节点，如果你有多个根节点，你可以使用一个大的div 或者其他的标签把所有的节点包裹一下，使一个组件中只有一个根节点。

 

简单举例：

错误使用：

import React,{Component, PropTypes} from ‘react‘;

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="div1"></div>
            <div className="div2"></div>
        )
    }
}    

export default Main;

 

正确使用：

import React,{Component, PropTypes} from ‘react‘;

class Main extends Component{
     constructor(props){
        super(this.props);
     }
    render(){
        return(
            <div className="divall">
                <div lassName="div1"></div>
                <div lassName="div2"></div>
            </div>
        )
    }
} 

export default Main;

 

 

参考链接： http://reactjs.cn/react/docs/displaying-data.html