随笔分类 - React
摘要：在react组件开发中，遇到需要请求接口来判断展示组件A或者B，但由于react生命周期函数，组件第一次render的时候，接口还没有返回数据，无法确定render什么组件。此时，新增一个布尔值状态isResOk: false，如果isResOk为false，请求没有成功，则不展示任何组件；如果is
阅读全文
摘要：1、react生命周期分4个阶段 2、example 1 import React,{ Component, Fragment } from "react" 2 import XiaojiejieItem from './XiaojiejieItem' 3 import './style.css'
阅读全文
摘要：1、检查node与npm安装与否 node -v npm -v 可在nodejs.cn网站进行下载安装 2、全局安装react脚手架 npm install -g create-react-app 3、新建项目所在文件夹，并进入 mkdir ReactDemo cd ReactDemo 4、用rea
阅读全文
摘要：1、react实现组件分三步： 根据页面进行组件拆分 编写静态组件（HTML和CSS的编写） 实现动态组件 2、 父组件向子组件传递数据： 父组件直接在引入的子组件内写入要传递的参数即可，<List allList = {person}/> 在子组件中以 this.props接收参数 1 //父组件
阅读全文
摘要：React脚手架之一create-react-app搭建过程，共四步： 在项目文件夹所在目录下，npm i create-react-app -g create-react-app myreact //注意项目名不能含有大写 cd myreact npm start 过程如下： 启动开发服务器后，
阅读全文
摘要：ref属性：作为接口，向外暴露DOM。非受控组件。（该属性不建议使用） 1 <script type="text/babel"> 2 class MyComponent extends React.Component{ 3 handleClick= ()=>{ 4 console.log(this.
阅读全文
摘要：props属性：将组件外部的数据=>组件内部 任务：将组件外部的数据=>组件内部，渲染出来 1 <script type="text/babel"> 2 class MyComponent extends React.Component{ 3 render(){ 4 console.log(this
阅读全文
摘要：任务：界面上有一行文字“甄姬”，当鼠标点击甄姬时，文字变为“安琪拉”；再点击再互换。 1 <script type="text/babel"> 2 class MyComponent extends React.Component{ 3 state = { 4 flag:true, 5 } 6 ha
阅读全文
摘要：1、组件编写方式的注意事项： 组件名首字母必须大写； 虚拟DOM必须只有一个根元素； 虚拟DOM必须有结束标签。 2、两种组件编写方式 简单组件：使用工厂函数，不涉及state值的渲染 <script type="text/babel"> function Simple(){ return <h1>
阅读全文
摘要：1、介绍 React：构建用户界面的JavaScript库，由Facebook出品的JS框架； babel.min.js：JS编译器，将JSX转换为标准的JS代码； react.development.js：React开发版核心代码，用于创建UI； react-dom.development.js：
阅读全文
