02/01-组件的定义方式-函数式,html
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //组件的定义方式一,利用函数定义组件 //首字母不大写就是无意义的标签 function MyApp(props){ return (<div> <h1>组件标题</h1> <p>组件段落</p> </div> ) } ReactDOM.render((<div> <MyApp title="app标题" content='app的段落内容'></MyApp> <hr/> <MyApp title="app标题" content='app的段落内容'></MyApp> </div>) ,document.getElementById('root')) //函数式组件的使用过程, //1)调用ReactDOM.render函数, // React会将render函数中的第一个参数使用到的组件中的属性转换为json对象 //2)调用定义组件的函数,如MyApp,并将上面所生成的json对象传给函数的参数 //3)调用之后得到函数的返回值,ReactDOM会将返回值生成虚拟DOM渲染到页面上 </script>
02-组件的定义方式2-class
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //组件的定义方式一,利用函数定义组件 //组件的定义方式二,利用React.Component类定义组件 //首字母不大写就是无意义的标签 class MyApp extends React.Component{ // constructor(props) { // super(props) //如果显示的定义构造时,一定要在构造函数的第一行, // //props,组件的属性对象 // console.log(props) // } //必须要定义render函数,而且render函数必须要将组件的视图模板返回 //construtor可以不写,因为是默认的,但render必须写,否则这个组件无意义 render() { return ( <div> <h2>{this.props.title}</h2> <p>{this.props.content}</p> </div> ) } } ReactDOM.render((<div> <MyApp title="app标题" content='app的段落内容'></MyApp> <hr/> <MyApp title="app标题" content='app的段落内容'></MyApp> </div>) ,document.getElementById('root')) </script>
03-组件的定义方式2-class
<div id='root'></div> <script src="./react.js"></script> <script src="./react-dom.js"></script> <script src="./babel.min.js"></script> <script type="text/babel"> //组件的定义方式三,利用React.createClass定义组件(一个方法来定义的) //React.createClass的参数,自定义组件选项 //实际上是个对象,MyApp会实例化成一个对象,会自动将title,content挂载在这个对象上,和Class是类似的 const MyApp = React.createClass({ //key:value //必须要设置render函数 render:function() { //要将组件模板返回 //因为实例化,所以有this.props return (<div> <p>{this.props.title}</p> <h2></h2> </div>) } }) //React.createClass方法在React 15.5版本及其之后不支持 //如果需要在React 15.5版本以后使用React.createClass方法创建组件,则需要引入额外库create-react-class //cnpm install create-react=class --save //在使用的地方 import createClass from 'create-react-class' // const MyApp=createClass({render(){}}) ReactDOM.render((<div> <MyApp title="app标题" content='app的段落内容'></MyApp> <hr/> <MyApp title="app标题" content='app的段落内容'></MyApp> </div>) ,document.getElementById('root')) //React.createClass组件的使用过程, //1)调用ReactDOM.render函数, // React会将render函数中的第一个参数使用到的组件中的属性转换为json对象 //2)React会根据React.createClass所设置选项创建一个实例,第一步得到属性对象赋值给该实例的props属性 // React.createClass所定义的选项都会挂在到所创建的实例上 //3) 通过所创建的实例,调用其render函数,得到jsx对象 //4)ReactDOM会将rener函数返回值生成虚拟DOM渲染到页面上 render的返回值会替换掉<MyApp/> </script>
04.三种方式的区别
<script> //1.函数是组件(无状态组件),精简到只有render函数的功能,不会被实例,整体渲染性能是最好 // 只能纯展示,不能改变数据,没有生命周期,没有状态(state,组件的状态,组件是有状态的) //2.类组件,利用React.Component定义组件或React.createClass定义组件 //如果函数式组件无法满足要求,React推荐尽量用React.Component定义组件 //React.Component: 1)函数this默认指向undefinded 2)props初始化不一样 3)状态state初始化不一样 4)props的验证方式不一样 5)混合方式不一样(组件混合) //React.createClass:1)函数this默认指向实例对象 class MyApp extends React.Component{ show() { //this--->默认是undefined this.props.title() } render() { return (<div onClick={this.show}>1111</div>) } } const MyApp = React.createClass({ show(){ //this---->默认是当前的实例对象 }, render() { return (<div onClick={this.show}>1111</div>) } }) //myMixins={} //把一些组件公共的属性和方法放在一个myMixins里然后调到组件里,用mixins这个属性来访问 Vue.component('',{ mixins:[myMins] }) </script>