React 总结笔记 (更新中……) 上

2023-08-04 61

版权

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

简介： React 总结笔记 (更新中……)

React

1、React基础

1、引入React

引入react使用cdn方式，还有另一种

<!-- 引入React核心库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 引入ReactDOM，用于支持react操作DOM -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

2、使用React渲染

<body>
    <div id="root"></div>
</body>
// React18版本之前的渲染DOM方法
// ReactDOM.render('你好',document.getElementById('root'))
<script type="text/babel">
  // React18版本使用的渲染DOM方法
    const root = ReactDOM.createRoot(document.getElementById('root'));
  const dom = React.createElement('div', {value:'你好'}, '你好a');
  // 虚拟dom
    console.log(dom);
    root.render(dom)
</script>

3、jsx语法

<!-- 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- script标签类型需是babel类型 -->
<script type="text/babel">
  const myId = 'heLLo';
  const myData = 'shang';
  //1.创建虚拟DOM
  const VDOM = (
    <div>
    <h2 className="title" id={myId.toLowerCase()}>
      <span style={{ color: 'white', fontSize: '29px' }}>
      {myData.toUpperCase()}
        </span>
    </h2>
    <h2 className="title" id={myId.toUpperCase()}>
      <span style={{ color: 'white', fontSize: '29px' }}>
      {myData.toLowerCase()}
        </span>
    </h2>
    <input type="text" />
    {/*如果这个标签名为大写的话，jsx会认为这是个组件*/}
    {/*<Sz>雷猴</Sz>*/}
    </div>
  )
  //2.渲染虚拟DOM到页面(react18版本使用的渲染方法)
  const root = ReactDOM.createRoot(document.getElementById('test'))
  root.render(VDOM)
</script>

jsx语法规则：

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。

js表达式：只有一行代码并且要有返回值

a 变量a

function fn(){}//不行

fn()// 函数调用

a?b:c //三元表达式

3.样式的类名指定不要用class，要用className。

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

2、React 组件

1、两种不同的组件

1.1、函数组件(无状态组件)：

函数组件又叫做无状态组件

// 定义
function Hello() {
    // 此处的this是undefined，因为代码经过babel编译后开启了严格模式
    console.log(this);
    return (
        <div>这是一个函数组件</div>
    )
}
// 函数组件的两种使用方式
{Hello()}
<Hello></Hello>

函数组件规范：

1、使用函数或箭头函数定义

2、名称需要是大写字母开头

3、必须要有返回值，表示该组件的结构

1.2、类组件(有状态组件)：

类组件又叫做有状态组件，状态（state）及数据

无状态组件为了展示静态数据，有状态组件为表示动态数据

// 定义
class Hello extends React.Component {
    //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
  console.log('render中的this:',this);
    render() {
        return <div>这是一个类组件</div>
    }
}
// 使用

类组件规范：

1、使用ES6里的class定义

2、名称需要是大写字母开头

3、类组件应该继承React.Component父类，从而可以使用父类中的方法或属性

4、必须提供render方法，和返回值

1.3、受控组件和非受控组件

受控组件：

通过自己实现数据的双向绑定，就是受控组件

非受控组件：

组件不受数据控制

3、React事件处理

3.1、事件绑定

class ClassHello extends React.Component {
  oncli(){
    alert('点击了Hello')
  }
  render() {
    return (
      // 使用this调用类中的方法
      <div className='hello' onClick={this.oncli}>我是一个函数组件！</div>
    )
  }
}

语法：on+事件名称={ }

事件名称采用驼峰命名法

3.2、事件对象

e: 事件对象

function Btn() {
  function alt(e) {
    console.log('事件对象:', e.target);
  }
  return (
    // 函数组件中使用事件
    <button onClick={alt}>点我！</button>
  )
}
// 函数组件
function FunctionHello() {
  function alt(e) {
    // 阻止浏览器得默认行为
    e.preventDefault()
    console.log('事件对象:', e.target);
  }
  return (
    <div><Btn></Btn>我是一个函数组件！</div>
  )
}