react基础---组件01

时间：2020-02-04 22:14:09 阅读：63 评论：0 收藏：0 [点我收藏+]

目录
1. 安装
2. antd框架
3. 列表中农数组添加删除
4. 纯函数PureComponent，React.memo
5. 高阶组件HOC
链式调用
装饰器
6. 组件复合
例1： Fetch组件--请求
例2： Filter组件--筛选出p标签
例3： Radio组件

内容
1. 安装
安装脚手架
#npm install create-react-app -g
新建项目
#create-react-app react01
或
#npx create-react-app react01
2. antd框架
#npm install antd --save
按需引入
#npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    // 在默认配置基础上注入
    // 插件名，插件配置
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );

  config = injectBabelPlugin(
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    config
  );

  return config;
};

View Code

3. 列表中农数组添加删除

　　原则不修改原数据，返回新数据

　　添加：arr.splice(idx, 1, {})

　　删除：

 addGood() {
    this.setState(prevState => {
      return {
        goods: [
          ...prevState.goods,
          {
            id: prevState.goods.length + 1,
            text: prevState.text
          }
        ]
      };
    });
  }

  //   加购函数
  addToCart = good => {
    // 创建新购物车
    const newCart = [...this.state.cart];
    const idx = newCart.findIndex(c => c.id === good.id);
    const item = newCart[idx];
    if (item) {
      newCart.splice(idx, 1, { ...item, count: item.count + 1 });
    } else {
      newCart.push({ ...good, count: 1 });
    }
    // 更新
    this.setState({ cart: newCart });
  };

View Code

4. 纯函数PureComponent，React.memo

　　应用场景：子组件是展示组件，父组件修改传给子组件的数据，实质没有修改

　　原始的

class Comment extends React.Component{

  shouldComponentUpdate(nextProps){
      if (nextProps.data.body === this.props.data.body &&
        nextProps.data.author === this.props.data.author) {
          return false;
      }
      return true;
  }

  render() {
    console.log("render comment");

    return (
      <div>
        <p>{this.props.body}</p>
        <p> --- {this.props.author}</p>
      </div>
    );
  }
}

View Code

　　PureComponent----只能处理class

//PureComponent
class Comment extends React.PureComponent{

  render() {
    console.log("render comment");

    return (
      <div>
        <p>{this.props.body}</p>
        <p> --- {this.props.author}</p>
      </div>
    );
  }
}

View Code

　　React.memo---可以处理function

// 展示组件
// memo高阶组件
const Comment = React.memo(function(props) {
  console.log("render Comment");

  return (
    <div>
      <p>{props.body}</p>
      <p> --- {props.author}</p>
    </div>
  );
});

View Code

5. 高阶组件HOC
链式调用
装饰器---后面必须是class

#npm install --save-dev babel-plugin-transform-decorators-legacy

const withKaikeba = Comp => {
  // 获取name,name可能来自于接口或其他手段
  const name = "高阶组件";
  console.log("do something");
  return class extends React.Component {
    componentDidMount() {
      
    }
    render() {
      return <Comp {...this.props} name={name} />;
    }
  };
};

const withLog = Comp => {
  console.log(Comp.name + "渲染了");
  return props => <Comp {...props} />;
};

@withLog
@withKaikeba
@withLog
class Kaikeba extends Component {
  render() {
    return (
      <div>
        {this.props.stage}-{this.props.name}
      </div>
    );
  }
}

View Code

6. 组件复合

props.children的理解和应用

例1： Fetch组件--请求

const Api = {
  getUser() {
    return { name: "jerry", age: 20 };
  }
};

function Fetcher(props) {
  const user = Api[props.name]();
  return props.children(user);
}    



//JSX
    <Fetcher name="getUser">
        {({ name, age }) => (
          <p>
            {name}-{age}
          </p>
        )}
      </Fetcher>

View Code

例2： Filter组件--筛选出p标签

function Filter({ children, type }) {
  return (
    <div>
      {React.Children.map(children, child => {
        if (child.type !== type) {
          return;
        }
        return child;
      })}
    </div>
  );
}

//JSX
{/* 过滤器，可以过滤出指定标签类型 */}
      <Filter type="p">
        <h1>react</h1>
        <p>react很不错</p>
        <h1>vue</h1>
        <p>vue很不错</p>
      </Filter>

View Code

例3： Radio组件

// 修改children
function RadioGroup(props) {
  return (
    <div>
      {React.Children.map(props.children, child => {
        //   vdom不可更改，克隆一个新的去改才行
        return React.cloneElement(child, { name: props.name });
      })}
    </div>
  );
}

function Radio({children, ...rest}) {
  return (
    <label>
      <input type="radio" {...rest} />
      {children}
    </label>
  );
}


//JSX
    <RadioGroup name="mvvm">
        <Radio value="vue">vue</Radio>
        <Radio value="react">react</Radio>
        <Radio value="react">angular</Radio>
      </RadioGroup>

View Code

7. 定时器的开始与卸载

componentDidMount(){
      this.timer = setInterval(() => {
          this.setState({
              date: new Date()
          })
      }, 1000);
  }

  componentWillUnmount(){
      clearInterval(this.timer);
  }

View Code

8. setstate

    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));

View Code

react基础---组件01

原文：https://www.cnblogs.com/shaokevin/p/12256559.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)