开发者社区> 马克付> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React 实用基础合集(1)

简介: React 实用基础合集(1)
+关注继续查看

2000元阿里云代金券免费领取,2核4G云服务器仅664元/3年,新老用户都有优惠,立即抢购>>>

1、JSX 主要注意点

1、react语法

使用 {xxx这里面写表达式,可理解为动态内容,常规 判断或者 三元表达式}
   vue 使用 {{xxx这里放内容}} 这个叫vue模版
复制代码

2、react样式

写class 使用 className="xxx写这里"
        动态的  className = {this.state.class1}
    写style={{xx:"xx"}} 里面 大括号 可以拿出来 作为整体 然后再传入
      静态 怎么写 style="color: 'red'"
 
复制代码

3、加载组件

1、引入组件
    2、使用 <List xxx/> 传递属性 
        需要注意的是 react 组件命名开头必须为大写的 
复制代码

4、判断条件和渲染列表 * 主要涉及

image

1、判断条件
if(xxx){}else{xxx}
2、三元
{ a ? b : c }
3、&& 
{a && b}
2、列表渲染
复制代码

image

  • 注意 map 返回新数组 是什么意思 ?
    不会更改元数组 内容
    返回的内容由map后的箭头函数 确定 map((item,index) => {xxx})
  • 注意 map 需要 使用 key(需要为独一的值)

2、为何事件需要bind this ?

1、需要说这几件事情

image

2、注意点

1、react 事件写法 onXxxxx   比如 onClick={this.handle}  onChange={this.change1} 
2、绑定 this 在 constructor 里面写 更好 ,因为 只执行一次 ,如果绑定在按钮上会多次触发
3、绑定的函数 当前更加推荐的写法 这样 不用在bind绑定 this
复制代码

image

* 关于 react 事件 异常重要的几件事情

1、event 是 react 合成的事件 非原生事件
2、虽为合成事件  但具备所有原生事件的能力
3、event.nativeEvent 是原生事件对象PointerEvent
4、事件被绑定到 document 上(16)
复制代码
  • 写个例子说明这个事情
import React from "react";
function handleClick(e) {
  e.preventDefault(); // 阻止默认事件
  e.stopPropagation(); // 阻止冒泡
  console.log("target", e.target); //a 标签
  //   console.log("current target", e.current.target); // TypeError: Cannot read property 'target' of undefined
  console.log("nativeEvent", e.nativeEvent); // PointerEvent{xxx}
  console.log("nativeEvent target", e.nativeEvent.target); // a标签
  console.log("nativeEvent current target", e.nativeEvent.current.target); // Cannot read property 'target' of undefined
}
function Event() {
  return (
    <a href="www.baidu.com" onClick={handleClick}>
      clike me
    </a>
  );
}
export default Event;
复制代码
  • 传递参数 在 bind(xxx,xxx,xxx) 默认传递的是 event
  • 示意图

image

3、表单相关内容

1、主要部分

image

import React, { Component } from "react";
class Handle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "jack",
    };
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <label htmlFor="inputValue">姓名:</label>
        <input
          id="inputValue"
          value={this.state.name}
          onChange={this.handleChange}
        ></input>
      </div>
    );
  }
}
export default Handle;
复制代码
  • 实现效果 就是 v-module vue里面的
  • 受控 组件 受 state 控制

image

image

  • 实现 效果展示

image

4、父子组件通讯

1、概述

image

2、重要的内容

1、状态(数据) 提升 将重要的数据部分 放到 最上层 父组件 管理, 子组件 只需要进行渲染 , 父组件传递什么 子组件 就渲染什么

* 简单来讲 就是把 state里面定义的数据 放在最上层组件内

3、实践一下 写一个 ToDoList_1(因为在我这个项目中定义过 ToDoList)

import React, { Component } from "react";
import PropTypes from "prop-types";
class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  onChange = (e) => {
    this.setState({
      title: e.target.value,
    });
  };
  onSubmit = () => {
    const { submit } = this.props;
    submit(this.state.title);
  };
  render() {
    return (
      <div>
        <input value={this.state.title} onChange={this.onChange}></input>
        <button onClick={this.onSubmit}>提交</button>
      </div>
    );
  }
}
//props 类型检查
Input.propTypes = {
  submit: PropTypes.func.isRequired,
};
function List(props) {
  const { list } = props;
  return (
    <ul>
      {list.map((item, index) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}
//props 类型检查
List.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired,
};
class ToDoList_1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          title: "text1",
        },
        {
          id: 2,
          title: "text2",
        },
      ],
    };
  }
  submit = (title) => {
    this.setState({
      list: this.state.list.concat({
        id: `id-${Date.now()}`,
        title,
      }),
    });
  };
  render() {
    return (
      <div>
        <Input submit={this.submit} />
        <List list={this.state.list} />
      </div>
    );
  }
}
export default ToDoList_1;
复制代码
  • 实现效果 非常nice

image



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Git----Git命令基础应用
Git----Git命令基础应用
22 0
多线程之原子类(八)
Java并发包中主要基于两个基础来构建的,一个是锁,一个是CAS操作。 与文无关 原子变量提供了与volatile类型变量相同的内存语义,此外还支持原子性操作。
675 0
+关注
马克付
有前端方面3年多经验,性能优化领域专家,csdn/掘金等平台优质作者,就职于xxx有限公司高级前端岗位,有过1周零基础 React 转 Vue 上线后台管理系统成就,擅长前端方面的工程化及性能优化技术等。
63
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
http://www.vxiaotou.com