react
爱运动的程序员
19年前端,哈尔滨工业大学软件工程专业
展开
-
react Router
安装 npm install --save react-router-dom 使用例子 import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; function Index() { return <h2>JSPang.com</h2>; } function List() { return <h2>List-Page原创 2021-03-05 14:07:51 · 55 阅读 · 0 评论 -
react context
context 直接上代码 import React, { useState , createContext } from 'react'; //===关键代码 const CountContext = createContext() function Example4(){ const [ count , setCount ] = useState(0); return ( <div> <p>You clicked {co原创 2021-03-04 15:34:40 · 95 阅读 · 1 评论 -
react useEffect
useEffect 使用: import React, { useState , useEffect } from 'react'; function Example(){ const [ count , setCount ] = useState(0); //---关键代码---------start------- useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`)原创 2021-03-04 15:30:47 · 90 阅读 · 1 评论 -
react useState
useState useState是react自带的一个hook函数,它的作用是用来声明状态变量。 声明方式: const [ count , setCount ] = useState(0); 使用 <div>{count}</div> 改变值 setCount(i) // 调用setCount方法参数是想要修改的值 注意: 就是React Hooks不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序。 ...原创 2021-03-04 15:11:56 · 189 阅读 · 1 评论 -
react 使用 PropTypes 进行类型检查
PropTypes 示例代码; import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: PropTypes.string };原创 2021-03-03 16:12:23 · 83 阅读 · 1 评论 -
react 列表&key
列表&key列表&key渲染多个组件基础列表组件key用 key 提取组件key 只是在兄弟节点之间必须唯一在 JSX 中嵌入 map() 列表&key const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 渲染多个组件 const numbers = [1, 2, 3, 4, 5]; const listItems原创 2021-03-02 15:05:04 · 126 阅读 · 0 评论 -
react 事件处理
事件处理 React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同: React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。 阻止默认行为 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。 function ActionLink() { function handleClick(e) { e.preven原创 2021-03-02 14:50:29 · 72 阅读 · 0 评论 -
react State & 生命周期
State & 生命周期state将函数组件转换成 class 组件向 class 组件中添加局部的 state将生命周期方法添加到 Class 中正确地使用 State不要直接修改 State使用 setState():State 的更新可能是异步的State 的更新会被合并数据是向下流动的 state State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。 将函数组件转换成 class 组件 通过以下五步将函数组件转成 class 组件: 1.创建一个同名的 ES原创 2021-03-02 14:35:32 · 65 阅读 · 0 评论 -
react 组件&props
组件&props组件 & Props函数组件与 class 组件渲染组件组合组件提取组件Props 的只读性 组件 & Props 组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。 函数组件与 class 组件 函数组件 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class 组件原创 2021-03-02 14:14:02 · 72 阅读 · 0 评论 -
react 元素渲染概念
react 元素渲染 元素是构成react应用的最小砖块 const element = <h1>Hello, world</h1>; 将一个元素渲染为 DOM 想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render(): const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'原创 2021-03-02 14:02:43 · 83 阅读 · 0 评论 -
react JSX概念
JSX简介JSX简介在 JSX 中嵌入表达式JSX 也是一个表达式JSX 特定属性使用 JSX 指定子元素JSX 防止注入攻击JSX 表示对象 JSX简介 const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是 HTML。 它被称为 JSX,是一个 JavaScript 的语法扩展。 在 JSX 中嵌入表达式 function formatName(user) { return user.firstName + '原创 2021-03-02 13:52:13 · 98 阅读 · 0 评论 -
创建react项目时遇到的报错
创建react项目时遇到的报错 百度到的第一个方法: 1.执行npm install -g create-react-app全局安装 2.执行npx create-react-app myapp创建项目 结果控制台打印: (node:18924) ExperimentalWarning: The fs.promises API is experimental You are running `create-react-app` 4.0.1, which is behind the latest relea原创 2021-02-04 09:50:49 · 4438 阅读 · 3 评论