react学习:组件&props

定义组件

1.函数定义组件:(此函数为有效的React组件,它接收一个单一的“props”对象并返回了一个React元素)

function Welcome(props) {

  return  <div>hello , {props.name}</div>

}

2.使用es6的class进行定义

class Welcome extends React.Component(

  render(

    return <div>hello , {this.props.name}</div>

  )

)

小结:两种定义在react中是一样的。

组件渲染

react元素可以是自定义的组件

  function Welcome (props){

   return  <div>hello , {props.name}</div> 

  }

  const element = < Welcome name="小可爱" />; // 此时界面显示的应该是:hello,小可爱

  ReactDOM.render(

    element ,

    document.getElementById(“root”)

  )

注:组件名称必须以大写字母开头。(用于区分DOM标签和自定义组件)

组件可以嵌套组件,但是注意:组件的返回值只能有一个根元素

组件提取

和vue一样,相似东西可以适当提取出来作为组件,省去重复代码

Props的只读性

 无论是使用哪种组件声明(函数定义/es6定义),都不可以改变他的props

原文地址:https://www.cnblogs.com/liyaping/p/11446165.html