随笔分类 - React
摘要:使用 <Fragment></Fragment> <></> 作用 可以不用必须有一个真实的 DOM 根标签 区别 Fragment 可以拥有一个 key 值
阅读全文
摘要:React Hook/Hooks 是什么? Hook 是 React 16.8.0 版本增加的新特性、新语法 可以让你在函数组件中使用 state 以及其他的 React 特性 三个常用的 Hook State Hook: React.useState() State Hook 让函数组件也可以有
阅读全文
摘要:setState 更新状态的两种写法 对象式的 setState setState(stateChange, [callback]) stateChange为状态改变对象 该对象可以体现出状态的更改 callback 是可选的回调函数,它在状态更新完毕,界面更新也更新后(render 调用后)才被调
阅读全文
摘要:路由的基本理解 SPA 理解 单页 Web 应用 (single page web application, SPA) 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面,只会做页面的局部更新 数据都需要通过 ajax 请求获取,并在前端异步展现 前端路由的理解 游览器端路由: value 是
阅读全文
摘要:react脚手架创建项目 全局安装 npm install -g create-react-app 切换到想创建的目录,使用命令 create-react-app hello-react 进入项目文件夹 cd hello-react 启动项目 npm start react 脚手架项目目录 publ
阅读全文
摘要:需求 创建一个表单组件然后提交 非受控组件 现用现取 class Login extends React.Component { // 表单提交 handleSubmit = () => { const {username, password} = this; alert(`你输入的用户名是:${u
阅读全文
摘要:React 三大组件核心属性之 refs 与事件处理 需求: 两个输入框中间又一个按钮 点击按钮提示左侧输入框数据 右侧输入框失去焦点提示数据 字符串形式的 ref 在元素中添加 ref 属性会添加到组件实例的 refs 中 class MyComponent extends React.Compo
阅读全文
摘要:每个组件都有会有自己的 props(properties)属性 组件标签的所有属性都保存在 props 中 通过标签属性从组件外向组件内传递变化的数据 模拟需求 自定义用来显示一个人员信息的组件 姓名必须指定, 且为字符串类型 性别为字符串类型,如果性别没有指定,默认为男 年龄必须指定,且为数字类型
阅读全文
摘要:state 是组件对象最重要的属性,知识对象(可以包含多个 key-value 的组合) 组件被称为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件) 模拟需求 点击文字,轮番显示今天天气很炎热和今天天气很凉爽 示例 一般写法 class Weather extends Rea
阅读全文
摘要:React 函数式组件 创建函数式组件 function MyComponent() { console.log(this); // 此处的 this 是 undefined,用为 babel 编译后开启了严格模式 return <h2>我是函数定义的组件(适用于简单组件的定义)</h2>; } 渲
阅读全文
摘要:jsx 全称:JavaScript XML react 定义的一种类似于 XML 的 js 扩展语法:js + XML jsx 语法规则 定义虚拟 DOM 时, 不要写引号 <body> <div id="test"></div> <script type="text/babel"> // 创建虚拟
阅读全文