React笔记

React笔记

简介

React是一个用于创建用户界面（web界面和原生APP界面）的JS库，不涉及HTML和CSS ，在React框架中没有HTML和CSS 。由Facebook公司推出。

认识虚拟dom与真实dom

在MVVM框架中，经常会用到一个概念就是数据改变新更新虚拟DOM，再由虚拟DOM 去更新真实DOM ，这是因为虚拟DOM比真实DOM更轻

在控制台输出真实DOM和虚拟DOM对这种轻会由明显的感受

//创建虚拟dom元素
        let vchild = React.createElement(
            'button',
            {
                title:'提交注册信息',
                className:'succ'
            },
            '提交'
        )
      console.dir(vchild);

控制台输出，可以看到属性都很少

下面是真实DOM

 <div id="app">

    div>
    <script>
        let child = document.createElement('app')
        console.dir(child);
    script>

在控制台输出可以看到，它的属性很多

通过上面的对比，相信能够很清晰的感觉到虚拟DOM 与真实DOM 的轻重

认识JSX

JSX（JavaScript XML）是一种在 JavaScript 中编写可嵌入 XML/HTML 类型结构的语法扩展。它是 React 库中用于构建用户界面的核心部分。

JSX 的编译过程会将代码转换为普通的 JavaScript 对象，这些对象描述了界面的结构和行为。React 库根据这些对象来生成实际的 DOM 元素，并进行渲染。

下面是一个简单JSX示例，构建了一个购物车数量增减的小组件

let count = 5
let vchild = 

            -
            {count} {/*这是一个注释*/}
            +
        
        //
        // let parent = document.getElementById('app')
        let vparent = ReactDOM.createRoot(app)
        vparent.render(vchild)

React起步

认识render

render是将 React 组件渲染到指定 DOM 元素的关键方法。通过使用这个方法，你可以在你的应用程序中将 React 组件转化为可见的用户界面。

下面是一个简单的示例，通过JSX语法创建一个简单 的自定义组件，并在虚拟子元素中使用它，最后父元素使用render将组件渲染到真实页面上

<script src="./js/react.development.js">script>
    <script src="./js/react-dom.development.js">script>
    <script src="./js/babel.min.js">script>
    <script type="text/babel">
        // 创建自定义组件
        function BuyCount(){
            return 

                    <button>-button>
                    <span>3span>
                    <button>+button>
                div>
        } 
        let vchild = <div>
            <BuyCount />
            <BuyCount>BuyCount>
        div>
   let vparent = ReactDOM.createRoot(app)
    vparent.render(vchild)

React的数据绑定

在React 中所有的绑定都使用{}完成，

• 内容绑定：<标签开始>{表达式}

• 属性绑定：

• 样式绑定：

• 事件绑定：fn2(参数)}

• 双向数据绑定：涉及到hooks的使用

• 条件渲染：

• 列表渲染：{list.map((item,index)=>(

  {item}))}

认识hooks(勾子)

hooks是React16.8引入的功能，它们是一组函数，允许您在函数组件中使用 React 的特性。使用 Hooks，您可以在无需编写类组件的情况下重用状态逻辑和其他 React 特性。

useState

用于在函数组件中添加和管理状态。它返回一个状态值和更新该状态值的函数，并且在组件重新渲染时保持状态不变。它是一个异步函数。

做一个简单的示例-计数器

let [count,setCount] = React.useState(0)
            let f1  = function(){
                setCount(count+1)
            }
            return (
                你已经点击了：{count}
            )

在这个示例中，我们可以看到useState方法中可以解构出一个数组[变量，方法]=React.useState(初始值)，只有在方法中变量的值发生变化时，才会被通知到React，最终在页面改变。

了解useState以后，React的数据绑定应该就比较好理解了

{/*双向数据绑定示例*/}
setAge(e.target.value)}/>

useRef

用于在函数组件中创建一个可变的引用，它返回一个可变的 ref 对象，并且在组件重新渲染时保持引用不变。用于在非受控组件中，接受组件的值。（受控组件：值由value绑定）

let r = useRef()

在提交时访问r.current.value便能够将值取出

useEffect

副作用，辅助功能

用于React的生命周期

认识React的生命周期

• 方法1：组件挂载 + 任意数据更新 —— 迎接新数据

   `useEffect( ()=>{} )`
  

• 方法2：组件挂载 + 依赖的数据更新 —— 迎接新数据

   `useEffect( ()=>{},[数据1, ....] )`
  

• 方法3：组件挂载

  ` useEffect( ()=>{},[ ] )`
  

• 方法4：任意数据更新 + 组件卸载 —— 送走旧数据

   `useEffect( ()=>{ return ()=>{} } )`
  

• 方法5：依赖的数据更新 + 组件卸载 —— 送走旧数据

   `useEffect( ()=>{ return ()=>{}}, [数据1, ...] )`
  

• 方法6：组件卸载 —— 送走旧数据

  ` useEffect( ()=>{return ()=>{}}, [ ] )`
  

React Native

React Native 是React提供的一个用于构建移动应用程序的开源框架。它允许开发者使用 JavaScript 和 React 来创建原生的、高性能的移动应用。

与传统的原生开发方式不同，React Native 使用了一种称为"Bridge"的机制来连接 JavaScript 代码和原生代码。这样，开发者可以使用熟悉的 React 组件模型和 JavaScript 语言来构建用户界面，同时仍然能够访问原生平台的功能和特性。

RN中的可用组件

1. RN项目中禁止使用HTML标签；RNApp是原生App，底层是没有浏览器的，不能解析HTML代码；

2. RN项目中可以自定义组件

• 在RN项目中components目录下创建一个自定义组件

• 在父组件中可以直接使用

3. RN项目还可以使用RN组件库中的组件

• 手册地址：https://reactnative.dev/docs/components-and-apis

RN中可用的样式

• RN应用中没有浏览器，没有标准CSS解释器，也就不能使用标准CSS！RN模拟标准CSS实现了一套基于JS对象的样式系统。

• RN中的样式分为三类：

  • 行内样式：

  • 内部样式： let ss=StyleSheet.create({danger:{color:'red'}})

  • 外部样式：export let gss=StyleSheet.create({danger:{color:'red'}})

• RN中的尺寸只有两种：% 和 px ,书写px时直接写数值就可以

• 默认字体大小14px，可以无限小

• RN样式中没有class/className属性

• RN中所有的复合属性都被拆分成单一属性，不再有复合值，类似与border

• RN中的样式大多的都是可以跨平台使用的

• style可以绑定样式组，但是只有最后一个生效，其他的样式被最后一个覆盖

• RN中的样式没有继承特性，即父级的样式不会给到子级，但是中列外，上一级Text的样式可以传到下一级Text