react

1、官网http://react.css88.com/docs/conditional-rendering.html 2、主要概念： JSX是javascript的一种扩展语法。JSX 可以生成 React “元素” 3、元素渲染 React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态 4、组件和属性 5、状态和生命周期 当存在多个组件共同依赖一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中 State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合 componentDidMount组件挂载 componentWillUnmount组件卸载 6、处理事件 在JSX回调中你必须注意this的指向。 在 JavaScript 中，类方法默认没有绑定的。如果你忘记绑定 this.handleClick 并将其传递给 onClick ，那么在直接调用该函数时， this 会是 undefined 7、状态提升 8、react建议使用组合而不是继承来实现代码的重用 9、redux Redux三大部分： store , action , reducer 来源： https://www.cnblogs.com/gpzhen/p/9293224.html

项目地址：https://gitee.com/dhclly/icedog.react React 练习项目 相关资源链接 React官方 https://reactjs.org React 中国 https://zh-hans.reactjs.org React 文档 https://react.docschina.org React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html React 入门教程Demo https://github.com/ruanyf/react-demos https://www.runoob.com/react React 练习要求 react react-dom browser.js or babel.js 相关辅助工具 react dev tool visual studio code vsc 插件 preview on borwser build目录说明 build 目录包含三个子目录 babel-core react react-dom babel 通过链接可知 https://blog.csdn.net/wopelo/article/details/77844916 从Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来，这里可以通过安装老版本的babel

/* react路由的配置： 1、找到官方文档 https://reacttraining.com/react-router/web/example/basic 2、安装 cnpm install react-router-dom --save 3、找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4、复制官网文档根组件里面的内容进行修改 （加载的组件要提前引入） <Router> <Link to="/">首页</Link> <Link to="/news">新闻</Link> <Link to="/product">商品</Link> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </Router> exact表示严格匹配 react动态路由传值 1、动态路由配置 <Route path="/content/:aid" component={Content} /> 2、对应的动态路由加载的组件里面获取传值 this

一、将flux的组件拆分成无状态组件------->UI组件 和 容器组件 这样会加快页面的加载和渲染的速度 增删效果未拆分之前 App.js import React, { Component,Fragment } from 'react'; import Input from './components/input' import List from './components/list' import dispatcher from './store/dispatcher' console.log(dispatcher) class App extends Component { render() { return ( <Fragment> <Input/> <List/> </Fragment> ); } } export default App; components/input.js import React,{Component} from 'react' import store from '../store' import dispatcher from '../store/dispatcher' console.log(dispatcher) class Input extends Component{ constructor(){ super(); this

从 render 函数可以看出来，组件内部是通过 this.props 的方式获取到组件的参数的，如果 this.props 里面有需要的属性我们就采用相应的属性，没有的话就用默认的属性。 那么怎么把 props 传进去呢？在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 props 对象的键值。 没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。 因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。 React.js 非常鼓励无状态组件，在 0.14 版本引入了函数式组件——一种定义不能使用 state 组件。 以前一个组件是通过继承 Component 来构建，一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件，你可以和以前一样通过 使用该组件。不同的是，函数式组件只能接受 props 而无法像跟类组件一样可以在 constructor 里面初始化 state。你可以理解函数式组件就是一种只能接受 props 和提供 render 方法的类组件。 默认配置 defaultProps 上面的组件默认配置我们是通过 || 操作符来实现

React介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 搭建React开发环境 安装 create-react-app 命令 (基于 webpack + es6) npm install - g create - react - app 使用 create-react-app 创建一个名字叫做 my-app 的项目 create - react - app my - app 如果创建项目过程中，提示node版本低，不兼容，那么执行 yarn config set ignore-engines true 解决该问题。 进入 my-app 目录 cd my - app / 启动 npm start # or yarn start yarn 来源： CSDN 作者： 芳芳乐 链接： https://blog.csdn.net/lff18277233091/article/details/104683666

React是Facebook推出的面向视图层开发的一个框架，用于解决大型应用，包括如何很好地管理DOM结构，是构建大型，快速Web app的首选方式。 React使用JavaScript来构建用户界面，因此可以说是一个用来构建用户界面的JavaScript库。 1、为什么使用 React？ React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。 1）简单：仅仅只要表达出应用程序在任一个时间点应该呈现的样子，当底层的数据变了，React会自动处理所有用户界面的更新。 2）声明式：数据变化后，与点击“刷新”按钮类似，但仅会更新变化的部分。 3）构建可组合的组件：React构建可复用的组件，事实上通过React唯一要做的事情就是构建组件，这得益于其良好的封装性，组件使代码复用、测试和关注分离更加简单。 2、对React认识的误区 1) React不是一个完整的MVC框架，最多是MVC中的V（View），甚至并不非常认可MVC开发模式； 2) React和Web Component不能相提并论，两者并不是完全的竞争关系，完全可以用React去开发一个真正的Web Component； 3) React不是一个新的模板语言，没有JSX的React也能工作。 3、React的原理 在Web开发中，总需要将变化的数据实时反应到用户界面上，这就需要对DOM进行操作

在写前端代码的时候会经常用到this.setState()方法进行变量的赋值操做，最近遇到一个比较头痛的问题，在不同的位置使用this.setState()的时候，有时候出现function not define的问题，会出现问题的代码如下： . then ( function ( response ) { console . log ( " response response " , response ) ; const { List } = this . state ; } ) 提示this.setState() undefined 的方法 经过查找资料后发现，是版本的问题，并不是this.setState()本身的问题，而是方法自身定义的问题，经过修改后的代码如下： . then ( ( response ) => { console . log ( " response response " , response ) ; const { List } = this . state ; } ) 来源： CSDN 作者： HelloLV111 链接： https://blog.csdn.net/qq_39769995/article/details/104682097

目录 1.React框架的介绍 2.准备工作 2.1 安装Node.js 2.2 创建工程 2.3 用VSCode 打开my-app文件夹 2.4 运行项目 npm start npm test npm run build npm run eject 3. JSX表达式和React基本理念 3.1 JSX 的基本结构 3.2 JSX的运行原理 3.3 JSX的基本语法 3.4 JSX 防止注入攻击 3.5 JSX中使用样式 3.6 JSX添加注释 4. React元素渲染和更新 4.1 元素渲染 4.2 元素更新 5. React中的函数(组件)和参数(props) 5.1 函数组件和class组件 5.2 组件渲染 5.3 组合组件 5.4 参数的不变性 1.React框架的介绍 React、Angular、Vue.js是三个主要的前端框架，从市场占有量来看React，Vue.js算是并驾齐驱，Angular则要明显少于前两者，好像阿三程序员用的比较多。三者的基本介绍可以看这个： React、Angular、Vue.js：三者完整的比较指南 。在Vue的中文官方网站上还有vue与React和Angular的详细对比： Vue对比其它框架 。关于各个框架的介绍我就不多说了，网上很多博文有详细分析，我目前主要学习React，所以只写了React方面的东西，这里贴一下React的中文

import axios from 'axios' // 创建并导出定位城市的函数 export const getCurrentCity = ( ) => { // 判断本地存储中是否有定位城市 const localCity = JSON . parse ( localStorage . getItem ( 'hkzf_city' ) ) if ( ! localCity ) { // 使用promise来解决异步问题 return new Promise ( ( resolve , reject ) => { // 如果没有就使用首页中获取定位城市的代码来获取，并且存储到本地存储中 const curCity = new window . BMap . LocalCity ( ) curCity . get ( async res => { try { const result = await axios . get ( `http://localhost:8080/area/info?name= ${ res . name } ` ) console . log ( result ) // 存储到本地存储中 localStorage . setItem ( 'hkzf_city' , JSON . stringify ( result . data . body ) )