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>