React学习笔记
文章平均质量分 80
学习React的记录
God Void
努力努力!!!
展开
-
React--hooks-- useRef 的使用
前言:在学React基础时,我们学习了refs这个属性来获取真实DOM,进而去操作真实DOM。而 我们 一般都是在 类组件上,使用 React.createRef(); 来创建ref。如果我们要在 函数组件上使用ref呢?所有React-hooks就为我们带来了 useRef 这个钩子函数。一、什么是useRef?const myRef = useRef(initialValue);useRef返回一个可变的ref对象,其.current属性被初始化为传入参数initialValue返原创 2021-11-19 22:57:58 · 964 阅读 · 0 评论 -
React--hooks-- useReducer数据状态管理
前言:之前我们在写react组件时,我们要么是通过类组件内定义state来管理数据,要么就是在函数组件内使用useState来管理数据。但如果一个数据牵扯到了很多个组件,那么我们管理起来就会十分麻烦。所以 react-hooks 为我们提供了一个类似与redux的功能 – useReducer来帮助我们集中式的处理复杂的state管理。一、useReducer的使用useReducer接收两个参数:第一个参数:reducer函数。第二个参数:初始化的state。返回值为最新的state和dis原创 2021-11-15 22:02:46 · 1937 阅读 · 0 评论 -
React--hooks-- useContext的使用
前言:之前,我们在使用 context 时,函数组件只能用 Consumer 包裹,而类组件虽然说能用 contextType ,但 contextType 在一个类组件内也只能使用一次,不能多个一起使用,所以当我需要传入多个context 时就会十分麻烦。而 React-hooks 为我们提供了 useContext 来让我们在函数组件中更方便的接收 context 。一、useContext的基本用法需求:简单实现一个主题切换、1.当我们不使用useContext时在这里插入代码片.原创 2021-11-14 21:11:54 · 1311 阅读 · 0 评论 -
React--hooks-- useMemo和useCallback
前言:在我们渲染页面时,有很多的函数和变量在没有被调用,但确触发并执行,父组件内的一部分在渲染时,子组件也会重新渲染等,这样会造成大量的内存消耗。所以 React-hooks 为我们提供了 useMemo 和 useCallback 来让我们对此进行优化处理,减少此类消耗,提高整体性能。一、useMemo 的使用1.不使用useMemo时function App() { const [count, setCount] = useState(1); const [value, se原创 2021-11-13 22:33:34 · 895 阅读 · 0 评论 -
React--hooks--useEffect的使用
前言:在react的class组件中,我们通过生命周期的钩子函数来完成一些副作用操作(发送网络请求,手动变更 DOM,记录日志等)。那么切换到函数组件,没有了this指向的生命周期钩子函数我们又要如何处理这些副作用操作呢?React-hooks 为我们提供了 useEffect 钩子函数,来让我更好的处理副作用。我们可以把 useEffect 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。一、如何使用原创 2021-11-12 22:40:29 · 934 阅读 · 0 评论 -
React--hooks--useState的使用 和 常见问题
Hook的简介Hook简单点说就是:(让函数组件具备类组件的功能)1.只能在函数组件内使用2.使得组件复用变得更加简单3.抛开了class繁杂的生命周期,以及this的指向问题一、useState的使用1.定义useState// 由于useState的返回值是数组// 所以数组解构出来的第一个参数是 状态,第二个参数是 改变状态的方法// initialState可以是任意js类型或对象,也可以是一个函数用于惰性初始化const [state, setState] = useState原创 2021-10-25 14:44:02 · 3886 阅读 · 0 评论 -
React--Context的使用
一、为什么要用contextContext 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。当我们子组件很多,并且都在同一个组件树上时,我们需要把props传递非常多次,所有我们可以用context把一些每个组件的公共数据通过Provider传递。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。二、如何使用Context?详情参考官网(1) Reract官方给出的API :React.createContext:创建一个上下文的容器(组原创 2021-10-20 19:30:00 · 391 阅读 · 0 评论 -
React-Refs的使用
Refs的使用(详情参考官网 Refs & DOM)Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式。要修改一个子组件,你需要使用新的 props 来重新渲染它。但是,在某些情况下,你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素。也就是说,Refs其实是提供了一个对真实DOM(组件)的引用,我们可原创 2021-10-16 20:43:15 · 389 阅读 · 0 评论 -
六、React生命周期
挂载卸载过程1.1.constructor()constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。1.2.componentWillMount()componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor().原创 2021-10-08 20:16:35 · 115 阅读 · 0 评论 -
五、React -- 列表&Key,表单
列表&Key一、.map()的使用1. 渲染基础的列表组件这个组件接收 numbers 数组作为参数并输出一个元素列表。const numbers = [1,2,3,4,5]function NumList(props){ const numbers = props.numbers; const listItems = numbers.map((number)=>( <li>number:{number}</li> ))原创 2021-09-27 19:08:35 · 98 阅读 · 0 评论 -
四、React组件的传值问题
React组件传值react内组件传值主要有三种: 父组件向子组件传值 、 子组件向父组件传值 、 以及 兄弟组件之间的传值一、父组件 - - - > 子组件父组件向子组件传值是通过 props 来传,在子组件中用 this.props.xx 接收父组件传来的值class Father extends React.Component { constructor(props) { super(props) this.state = {原创 2021-09-20 20:37:20 · 401 阅读 · 0 评论 -
三、类组件的state & setState
一、state的基本使用需求:封装一个Clock组件来实现时钟的自动更新1.用函数组件实现function Clock(props){ return ( <div> <h1>hello world</h1> <h1>it is {props.time}</h1> </div> )}function tick(){ React原创 2021-09-18 16:25:13 · 1009 阅读 · 0 评论 -
二、React函数组件和类组件
注意: 无论是函数组件还是类组件,组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如,< div /> 代表 HTML 的 div 标签,而 < Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome。函数组件1.定义函数组件(1)最基本的定义方式function Welcome() { return <h1>Hello</h1>;}(2)传入props的定义方式functio原创 2021-09-14 22:24:57 · 99 阅读 · 0 评论 -
一、JSX语法的基本使用
JSX语法的基本使用一、什么是JSX?JSX是React的核心组成部分,是一种JavaScript语法扩展,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法。eg. 我们直接用html输出一个helloworld,代码是直接写在body里面:<body> <div>helloworld</div></body>但 jsx 是 把 html 代码写在原创 2021-09-11 16:47:05 · 1545 阅读 · 0 评论