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的返回值会替换掉
    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>
  

 

你可能感兴趣的