React组件详解

React组件详解

一、类组件

1. 组件的名称必须要大写，为了区分组件和标签。

2. 通过ES6的继承实现组件的创建，继承于React.Compont。

3. 组件内部必须要有一个render函数，render函数中必须返回一个jsx语法。

   ( jsx语法中的节点必须有唯一的根元素进行包裹。)

constructor作用：（非必要）

1. 用来做组件的初始化
2. 存放组件所需要的状态(存储在constructor中的this.state中)
3. 如果有constructor，则必须要写super();

• Demo

import React from "react";
class App extends React.Component{
    constructor(){
        super();
        //存放组件所需要的一些状态
        this.state = {
            arr:[10,20,30,40],
        }
    }
    render(){
        console.log("render")
        let {arr} = this.state;
        //必须要返回一个jsx语法
        return (
            <div>
                <ul>
                {
                    // this.state.arr.map((item,index)=>{
                    //  return <li key={index}>{item}</li>
                    // })
                    this.state.arr.map((item,index)=>(
                        <li key={index}>{item}</li>
                    ))
                }
                </ul>
            </div>
        )
    }
}

• 推荐安装插件React Native Tools

在安装了React Native Tools之后，只需要按rcc即可初始化类组件。

React-Native-Tools.png

• 在16以前的版本还支持这样创建组件, 但现在的项目基本上不用

需要先安装create-react-class

yarn add create-react-class -S

import React from 'react';
import ReactDOM from 'react-dom';
import createClass from 'create-react-class';

var Hello = createClass({
  render(){
    return <h1>learninginto</h1>
  }
})

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

二、函数式组件(无状态组件)

组件名称必须要大写（小写时编译器不一定报错，但运行时会报错）

• Demo

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

//组件名称必须大写
const App =(props)=> <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
 <App name="react" />,
  document.getElementById('root')
);

render也可以这样

ReactDOM.render(
 app({
   name:'react'
 }),
  document.getElementById('root')
);

三、高阶组件（HOC）

是一个函数，接收一个组件返回一个相对性增强的组件。

• src/connect/createContext.js

import React, { createContext } from "react";
export let { Provider, Consumer } = createContext();

• src/connect/index.js

import { Consumer } from "./createContext"

• src/hoc/connect.js

import React from "react";
import {Consumer} from "../connect/createContext"

export const connect = (WrapperComponent)=>{
    return class extends React.Component{
        render(){
            return (
                <Consumer>
                    {
                        (props)=>{
                            return <WrapperComponent {...props}/>
                        }
                    }
                </Consumer>
            )
        }
    }
}

• main.js

import React from "react";
import ReactDOM from "react-dom"
import App from "./index";
import "./index.css"
import { Provider } from "./connect/createContext"
ReactDOM.render(
    <Provider
        value={{
            username: 'lxc',
            age: 18
        }}
    >
    <App />
    </Provider>,
    document.getElementById("root"),
    () => {
        console.log("渲染成功")
    }
)

• /component/two.js

import React, { Component } from "react"
import { connect } from "../hoc/connect"
class Two extends Component {
    render() {
        let { username, age } = this.props
        return (
            <div className="Two">
                Two组件
                <h2>username:{username}</h2>
            </div>
        )
    }
}

export default connect(Two)