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
时间: 2024-10-13 05:21:38