react-组件&props

1.React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

2.建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

const element = <p>{formatName(user)};

组件：

• 函数组件

/*该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）
对象与并返回一个 React 元素。这类组件被称为“函数组件”， 因为它本质上就是 
JavaScript 函数。*/

function Welcome(props){
 return <h1>hello,{props.name}</h1>
}

• class组件

//与上边函数组件等效
class Welcome extends React.Component{
  render(){
    return <h1>hello,{this.props.name}</h1>
  }
}

• 渲染组件

//html部分
<div id="root"></div>

//js部分
function Welcome(props){
  return <h1>hello,{props.name}</h1>
}
const  element = <Welcome name="Sara" />>
ReactDOM.render(
  element,
  document.getElementById('root')
)

注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，< div/ >代表 HTML 的 div 标签，而 < Welcome / > 则代表一个组件，并且需在作用域内使用 Welcome。

• 组合组件

//html部分
<div id="root"></div>

//js部分
function Welcome(props){
  return <h1>hello,{props.name}</h1>
}
function App(){
  return {
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  }
}

ReateDOM.render(
  <App/>>,
  document.getElementById('root')
)

• 提取组件