前端框架React快速入门

最新推荐文章于 2024-07-24 15:55:29 发布

2401_85124329

最新推荐文章于 2024-07-24 15:55:29 发布

阅读量270

点赞数 4

文章标签： react.js 前端框架 javascript

本文链接：https://blog.csdn.net/2401_85124329/article/details/139600420

版权


#### map 循环遍历

render() {
const data = [‘apple’, ‘banana’, ‘orange’];

const componentList = data.map((item, index) => {
return ;
});

return (

{componentList}

);
}


在这个例子中，`data`数组包含了三个水果名称，我们使用`map()`方法遍历`data`数组，并针对每个元素创建一个`<Component>`组件，通过`key`属性来唯一标识每个组件(`下标index`标识)，同时将当前元素作为`data`属性传递给组件。最后，将生成的组件列表放在`<div>`容器中进行渲染。



> 
> 需要注意的是，使用`map()`方法时，需要给每个生成的元素指定一个唯一的`key`属性，以便React能够准确地进行组件的识别和更新
> 
> 
> 


#### 事件


React 事件的命名采用小驼峰式（camelCase），而不是纯小写。如点击事件onClick


使用 JSX 语法时你需要传入一个函数作为**事件处理**函数，而不是一个字符串

function hello (e) { //事件函数
console.log(“哈喽我是点击事件”,e);
}
//e 中存放的是该事件的一些信息，如鼠标坐标

function A () {

return (
  <div>
    <button onClick={this.hello}>你好</button>
  </div>
  //onClick后面跟上事件对应的方法名 
)}


#### React Hooks(钩子函数)


##### useState 状态处理


**`useState` 设置出的变量，叫状态变量，该变量的改变会引起页面的自动刷新**

//构建函数，该函数用于页面渲染
function APP()
{

const [content,setcontent]=useState("当前内容")   
//设置状态变量，并设置其初始值，返回值为两个变量，
//一个用于读取，一个用于修改
//参数content用来读取该状态变量的当前值，参数setcontent
//用来修改值

function handle(e)   //事件函数
{
    setcontent("修改后的新内容"); 
    //将setcontent对应的状态变量值进行修改
    //修改方式:用传入的值来替换原来的值
    //因此，若状态变量是一个对象,则修改时需要将所有成员
    //变量都书写出来
    
    //若成员变量太多，可以将对象展开
    //展开的代码属性形式: `...读取状态变量值的参数名,`
    //在这后面再对其中部分数据进行修改
    //(重复声明的变量，后面值会覆盖前面值)
    
    console.log("点击了按钮",e);
     //e 中存放的是该事件的一些信息，如鼠标坐标
}


return(
    <Fragment>
        <div >{content}</div>
        <button onClick={handle}>按钮</button>
    </Fragment>
    
);

}


##### useContext逐层传递


**`CreateContext` 设置出的变量，该变量能够逐层传递，从而由此可以改变每一层的Props(属性)**

const levelContent=CreateContent(5)
//使用CreateContent()设置了一个Context变量，并为其设初值

//………………
const level=useContext(levelContent)
//获取对应Content变量的值,该值由上层组件中距离当前组件最近的
//<MyContext.Provider> 的 value prop(属性) 决定。
//若已经是最高层了,则对应的Context变量值由其初值决定

<levelContext.Provider value={level+1}>
…………
</levelContext.Provider>


##### useReducer统一管理


`useReducer` 是一个 React hooks，它允许你在组件中使用状态管理。`useReducer` 接受两个参数：一个函数作为计算状态的 **reducer(`状态管理函数`)**，以及**初始状态(初始值)**。reducer 函数接收 **state(`状态变量`)** 和 **action(`对该状态变量进行什么操作`)** 作为参数，并返回一个新的 **state(`状态变量`)**。


`useReducer` 还提供了一个函数 `useReducerPayload`，它可以直接在组件中获取由 action 传递的属性。


定义一个 reducer 函数，它接收 `state` 和 `action` 作为参数：

const counterReducer = (state = 0, action) => {
//action.type 表示对state状态变量操作的类型
switch (action.type) {
case ‘INCREMENT’:
return state + 1;
case ‘DECREMENT’:
return state - 1;
default:
return state;
}
};


在组件中使用 `useReducer` 和 `useReducerPayload`：

const Counter = () => {
const [state, setState] = useReducer(counterReducer,0);
//useReducer()参数1是该状态变量对应的状态管理函数,
//参数2是状态变量的初始值

//返回值为 state 状态变量，setState 状态管理函数触发函数
const increment = () => {
setState({ type: ‘INCREMENT’ });
//传入操作类型
};
const decrement = () => {
setState({ type: ‘DECREMENT’ });
};
const getPayload = () => {
return state;
};

return (

Increment
Decrement

Counter: {getPayload()}

);
};



> 
> 在这个示例中，我们定义了一个简单的计数器组件，它使用了 `useReducer` 来管理状态。我们定义了一个名为 `counterReducer` 的 reducer 函数，它根据 action 的类型来更新 state。然后，我们使用 `useReducer` 获取 state 并将其传递给组件。我们还定义了两个函数 `increment` 和 `decrement`，它们分别用于增加和减少计数。最后，我们使用 `useReducerPayload` 函数直接获取 state，并在组件中显示它。
> 
> 
> 


##### useRef获取状态


`useRef` 是一个 React hook，它允许你在函数组件中创建一个 ref。**ref 是一个指向 DOM 元素的引用，你可以使用它来记录 DOM 元素的状态**。ref 不会被渲染，所以它们不会出现在最终的 DOM 结构中。


在组件中使用 `useRef`：

const Counter = () => {
const [state,setstate]=useState(2)

const count = useRef();
//设置一个叫count的ref

count.current=state;
//将当前状态变量的值赋值给count

const increment = () => {
state++;
};

const decrement = () => {
state–;
};

//最终结果是点击按钮，状态变量state不断在改变，但count的值
//不变，想要改变count的值需要操作count.current

return (

Increment
Decrement

Counter: {count.current}

);
};


**注意，`useRef` 仅在函数组件中有效**


Ref不仅可以**获取值**，还可以**获取标签**:

const inputEl = useRef(null)
//设置Ref变量并与input标签关联

const handleFocus = () => {
inputEl.current.focus()
//获取input标签，并调用其focus()方法，使其获得焦点
//(即选中输入框)
}
return (

       {/\*将ref变量inputEl与该输入框关联\*/}
       
       <button onClick={handleFocus}>按钮</button>
   </p>

)


Ref还可以**获取一个组件**:


![image.png](https://img-blog.csdnimg.cn/img_convert/cc8544b556f9ceaedc5e10226873e4c6.png)  
 ![image.png](https://img-blog.csdnimg.cn/img_convert/478a7a2671fc151effc2b00e95580304.png)  
 如上图所示，`组件APP`中有一个`子组件Child`, 设置一个`ref 变量childRef`与其关联,同时,`子组件Child`函数需要使用`forwardRef()`来处理,以方便子组件与Ref变量关联，这样在父组件中就可以通过`操作childRef`来直接使用该子组件了


父组件还可以通过`Ref变量`使用`子组件中的部分方法`:  
 ![image.png](https://img-blog.csdnimg.cn/img_convert/eb98406295c43040281b82244ac8a581.png)  
 如上图所示,子组件可以通过`参数ref`来接收与之关联的`Ref变量`,通过`useImperativeHandle()`来**将其中的子组件方法提供给父组件使用**。


* 参数1是与该组件关联的`Ref变量`
* 参数2是一个函数,该函数返回值必须是一个对象,因此才会有`{}`的出现


下图是`父组件App`使用`子组件Child`中的`方法myFn`:  
 ![image.png](https://img-blog.csdnimg.cn/img_convert/eae008c35989eaf2894036d373339574.png)


##### useEffect 副作用函数


`useEffect()`设置的函数可以`在非用户触发时自动执行`,默认是在组件渲染开始时进行,**每刷新页面一次,执行一次**


![image.png](https://img-blog.csdnimg.cn/img_convert/a7511d648169c9cc4632a36a5cd984c5.png)


`useEffect()`:


* 参数1是要执行的函数
* 参数2是个**数组**,其中存放触发函数执行的**变量**(`变量改变,函数执行`),若数组为空,则没有变量能促发函数执行(`页面刷新除外`),该参数可以缺省,缺省则**页面刷新一次,执行一次**


##### useMemo 数据缓存


![image.png](https://img-blog.csdnimg.cn/img_convert/5a7518da426286b3f12eaeac1fb60749.png)  
 如上图所示,通过useMemo可以将函数对应的返回值进行缓存。


* 参数1 函数,该函数的**返回值会进行缓存**,`result`中存放着函数的**返回值**
* 参数2 是个**数组**,`当其中对应的变量发生变化时,缓存中的值才会更新`,即函数会重新执行


##### useCallback函数缓存


![image.png](https://img-blog.csdnimg.cn/img_convert/2cb7b957f38ce5199b61ad280dfc11db.png)  
 如上图所示,`Button`是一个子组件,传入的参数`onClick`是一个函数,该组件通过`memo()`变为了一个记忆组件,即**只要传入的Props不变,子组件就不会重新执行**


![image.png](https://img-blog.csdnimg.cn/img_convert/df6900422011d54affeefc9f3ade115e.png)


![image.png](https://img-blog.csdnimg.cn/img_convert/b90d43d5e3d122d3f18bbd28c228362a.png)  
 如上图所示,通过`useCallback()`将对应函数进行缓存,只有**当`参数2([])`中的变量改变时,对应的函数才会重新执行**。


#### 展开语法


通过`...参数名`可以将**对象性质的变量**展开

const value={
title:“标题”,
content:“内容”,
id:1
};

…value //将变量value展开
//
// 等价于(不再有大括号)
// title:“标题”,
// content:“内容”,
// id:1


#### 组件间通信与插槽


React中组件分两种类型,一种是`React DOM组件`,一种是`React组件`。**`DOM组件`是指所有React支持的HTML和SVG标签**,**`React组件`表示用户自定义标签**。


React组件中的所有的标签属性统称为`Props`,并通过`Props`来管理。


##### DOM组件中CSS的写法


CSS中的标签类名属性class在React中要改为`className`，以防止与js中的`类class`重名。

return(

        <button 
        onClick={handle} 
        className="button" 
        style={{
            width:200,
            height:200,
            backgroundColor:"red"
        }}>
            按钮
            </button>
            
    </Fragment>
    //CSS中的类名class改为了className
    //style属性中第一对{}为React中的插值功能,
    //第二对{}及其中内容表明这是CSS属性,是CSS属性的常规写法
);


也可以采用**展开语法**，其效果与上述代码等价:

const imgData={
className:“button”
style:{
width:200,
height:200,
backgroundColor:“red”
}
}

return(

<button
onClick={handle}

        {...imgData}  
        >
            按钮
            </button>  
    </Fragment>
    //{...imgData} 外面{}是插值语法,里面就是展开语法
);


##### 自定义标签中的Props(属性)设置


![image.png](https://img-blog.csdnimg.cn/img_convert/0635947a2c90d066fa6e2d2d1c45e679.png)  
 如上图所示，`自定义标签Article`传入的自定义的标签属性`title`与`content`,由`props`来接收与管理。也可以直接设置参数来接收属性，而不用`props`，如下图


![image.png](https://img-blog.csdnimg.cn/img_convert/1c53cef74d3e9cf037b04c0e5beed166.png)  
 **在函数Article中设置了`参数title,content`来接收对应的标签属性**


##### 自定义标签的属性多级传递


![image.png](https://img-blog.csdnimg.cn/img_convert/b4a90f0eca07f6c82b739b7855cbca28.png)  
 ![image.png](https://img-blog.csdnimg.cn/img_convert/6c0efe4524712d9fbee3de2d6a5184ff.png)  


**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**

### HTML

*   HTML5有哪些新特性？

*   Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

*   如何实现浏览器内多个标签页之间的通信？

*   ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

*   简述⼀下src与href的区别？

*   cookies,sessionStorage,localStorage 的区别？

*   HTML5 的离线储存的使用和原理？

*   怎样处理 移动端 1px 被 渲染成 2px 问题？

*   iframe 的优缺点？

*   Canvas 和 SVG 图形的区别是什么？


![](https://img-blog.csdnimg.cn/img_convert/476288e164f5711c5c11e55a79185bd8.png)



### JavaScript



*   问：0.1 + 0.2 === 0.3 嘛？为什么？

*   JS 数据类型

*   写代码：实现函数能够深度克隆基本类型

*   事件流

*   事件是如何实现的？

*   new 一个函数发生了什么

*   什么是作用域？

*   JS 隐式转换，显示转换

*   了解 this 嘛，bind，call，apply 具体指什么

*   手写 bind、apply、call

*   setTimeout(fn, 0)多久才执行，Event Loop

*   手写题：Promise 原理

*   说一下原型链和原型链的继承吧

*   数组能够调用的函数有那些？

*   PWA使用过吗？serviceWorker的使用原理是啥？

*   ES6 之前使用 prototype 实现继承

*   箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

*   事件循环机制 （Event Loop）


![](https://img-blog.csdnimg.cn/img_convert/0ba8bcdea9cbbc7373d2fa90b1951a07.png)

2401_85124329

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端框架React快速入门

/返回值为 state 状态变量，setState 状态管理函数触发函数。//获取对应Content变量的值,该值由上层组件中距离当前组件最近的。//最终结果是点击按钮，状态变量state不断在改变，但count的值。//useReducer()参数1是该状态变量对应的状态管理函数,//不变，想要改变count的值需要操作count.current。//获取input标签，并调用其focus()方法，使其获得焦点。//e 中存放的是该事件的一些信息，如鼠标坐标。//将当前状态变量的值赋值给count。
复制链接

扫一扫