React -- 组件封装&props

Posted 2021-12-02 zjh-study

一、组件封装

一个函数就是一个组件，该函数接受一个props对象，并返回一个React元素

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

通过class和React.Component也可以定义一个组件，跟上面的组件是等价的

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

二、声明组件

感觉其实声明一个React元素，只不过这个元素是以组件名字命名的类似单标签模式，里面写入要传入的props
比如上面创建的是Welcome组件，那么渲染时就是这样的
TipsReact中，自己封装的组件名字必须以大写字母开头，否则会识别为原生DOM标签

const element = <Welcome name="World" />

三、渲染组件

通过ReactDOM.render()函数就可以将组件渲染出来了

ReactDOM.render(
  element,
  document.getElementById('root')
);

四、组件嵌套

可以在组件里面，嵌套使用别的组件，比如创建一个新的App组件，在里面重复调用Welcome组件，然后渲染出去

function App() {
  return (
    <div>
      <Welcome name="World" />
      <Welcome name="React" />  
    </div>
  )
}

渲染

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

五、组件分离

其实组件分离有点类似vue的组件化开发，可以把任何一个功能当成是一个组件，单独分离出来，以备复用，这个组件分离就是将一个复杂的组件里面的一些数据单独提取出来组成一个新的组件
比如上面的App组件，正常应该是这样的：

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <h1>Hello React</h1>  
    </div>
  )
}

然后把h1标签部分提取出来为一个单独的组件使用，就变成了这样，成为一个Welcome组件

function App() {
  return (
    <div>
      <Welcome name="World" />
      <Welcome name="React" />  
    </div>
  )
}