20201103-初学react(二)

react组件由浅入深,优雅引入

无状态组件

在index.js中直接使用箭头函数

代码

import React from 'react';
import ReactDOM from 'react-dom';

const App=()=>{
  return (<div>
    无状态组件
  </div>)
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

有状态组件

在index.js里面直接写组件

代码

import React from 'react';
import ReactDOM from 'react-dom';

// const App=()=>{
//   return (<div>
//     无状态组件
//   </div>)
// }
class App extends React.Component{
  render (){
    return (<div>有状态组件</div>)
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

模块化组件(优雅引入)

1. 在src文件夹下面新建文件夹component
2. 在component文件下新建index.js(新建文件的模板为js)
3. 在component文件下新建Rfc.js与Rcc.js(Rcc.js模板为react component)
4. 在src文件下新建App.js

在component文件下的index.js写入

export {default as Rfc} from './Rfc'
export {default as Rcc} from './Rcc'

在component文件下的Rfc.js(无状态组件,)写入(rfc.js为模板组件,具体设置请看初学react(一) )
代码

import React from 'react';

export default function Rfc() {
  let str='无状态组件'
  return (
    <div>{str}</div>
  )
}

在component文件下的Rcc.js写入(有状态组件)

import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      str:'有状态组件'
    };
  }

  render() {
    return (
      <div>{this.state.str}</div>
    )
  }
}

在src文件夹下面新建App.js

import React, {Component} from 'react';
import {Rfc,Rcc} from './component/index'

export default class App extends Component {
  render() {
    return (
      <div>
        <Rfc />
        <Rcc />
      </div>
    )
  }
}