React源码解析之React.Children.map()(五)
一，React.Children是什么？
是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具，是顶层的api之一
React.children的用处：https://www.cnblogs.com/sunxiaopei/p/13805645.html
二，React.Children.map的结构及举例
结构：React.C ...
React的React.createContext()源码解析(四)
一.产生context原因
从父组件直接传值到孙子组件，而不必一层一层的通过props进行传值，相比较以前的那种传值更加的方便、简介。
二.context的实现方式
新版本(React16.x后)
//创建两个组件 Provider,Consumer
//let {Provider,Consumer}=React.createContext(defaultValue); //defaultValue可以设置共享的默认数据 当Prov ...
react遍历列表
遍历列表,遍历对象,以及组件
1.遍历列表(map和forEach的区别)
return后面不能为空格，回车，否则就是报错,如果非要换行，，在return后面加一个小括号,变成了一个表达式(自执行函数)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv ...
django+react
后端：
>>> pip install Django==1.11 >>> sudo pip install django-webpack-loader Successfully installed django-webpack-loader-0.6.0 >>> python -m django --version 1.11.11 需要解决跨域问题， 前端才能访问前端： node和npm安装， 包下载： http: ...
TS + React
项目结构
因为目前项目是没有做前后分离的打算的（一个内部工具平台类的项目），所以大致结构就是基于上次Node项目的结构，在其之上添加了一些FrontEnd的目录结构：
.
├── README.md
├── copy-static-assets.ts
├── nodemon.json
├── package.json
+ ├── client-dist
+ │ ├── bun ...
在React中使用react-router-dom路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
安装
首先进入项目目录，使用npm安装react-router-dom：
npm install react-router-dom --save-dev //这里可以使 ...
React的环境搭建以及脚手架的安装
1.安装node.js
如果安装了，就请参照第二步；没有的话，去node.js官网下载：https://nodejs.org/zh-cn/download/
2.检查
win键+r ----->打开资源管理器---->输入cmd------>在命令窗口输入node -v和npm -v(是为了检查版本号)
因为国内使用npm很慢，我们可以使用淘宝的cnpm，同时设置镜像地址
...
React Select组件
#cnblogs_post_body img { max-width: 600px; height: auto }
官网：
1）http://jedwatson.github.io/react-select/
2）https://github.com/JedWatson/react-select
3）https://www.npmjs.com/package/react-select
demo结构：
package.json
"dependencies": {
"react": "^16.12.0",
"react-dom" ...
react项目搭建和启动
1.全局安装webpack
npm install webpack
然后在启动的时候就会报错
改成带上版本号就不会报错
npm install webpack@3.5.5 -g --unsafe-perm
2.创建package.json文档
.首先新建文件reactWebpacke（这个名字自己随便取），然后在此文件执行下面代码
npm config set regis ...
在 React 中使用 Typescript
前言
用 Typescript 写 React 可比写 Vue 舒服太多了，React 对 ts 的支持可谓天生搭档，如果要用 ts 重构项目，不像 Vue 对项目破坏性极大，React 可以相对轻松的实现重构。
顺便一提：全局安装的 create-react-app 现已无法再下载完整的 React 项目模版，必须先 npm uninstall -g create-react-app 移除命令 再 ...
React Navigation 学习
React Navigation： Android 和 iOS 设备上的路由工具，包括手势和动画。
零、环境篇
在使用 react-navigation 之前，我们需要创建一个 react-native 项目。（参考https://reactnative.cn/docs/getting-started）
一、Navigator 的种类和创建
在 web 项目中的 react-router，只负责功能实现，样式是需要开 ...
React的React.createElement源码解析(一)
一.什么是jsx
jsx是语法糖 它是js和html的组合使用
为什么用jsx语法？
高效定义模版，通过babel编译后使用 不会带来性能问题
二.jsx语法转化为js语法
jsx语法通过babel转化为js语法 内部调用了React.createElement()方法
html标签
自定义组件
&nbs ...
React+Flask打造前后端分离项目开发环境
目录前言Backend-FlaskFrontend-ReactDoneReferences
前言
新的一年，开始水第一篇技术文。碰巧最近React玩得多，撸一篇文章纪念一下开发环境的搭建。🤔
原文：React+Flask打造前后端分离项目开发环境
开篇两问：
什么是React？：React，用于构建用户界面的 JavaScript 库（官网复制粘贴，真香，不用怎么写template了， ...
ReactNative: 了解相机第三方库react-native-camera的使用
一、简介
在前一篇文章中，初步介绍了RN提供的关于相机功能CameraRoll的使用了。很多时候，这种最基础的API有时很难满足功能需求，此时，如果不想重复造轮子，我们可以选择一个完善好用的第三库。react-native-camera就是一个非常不错的关于相机功能的第三方库，使用这个框架基本能满足大多数的需求，现在来简单研究一下。
...
React Native 性能优化指南
2020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。
本文谈到的 React Native 性能优化，还没到修改 React Native 源码那种地步，所以通用性很强，对大部分 RN 开发者来说都用得着 ...
react路由传参(3种方式)
1、params传参(刷新页面后参数不消失，参数会在地址栏显示)
路由页面：<Route path='/demo/:id' component={Demo}></Route> //注意要配置 /:id
路由跳转并传递参数：
链接方式：<Link to={'/demo/'+'6'}>XX</Link>
或：<Link to={{pathname:'/demo/'+'6'}}>XX</Link>
js方式：this.props.history.push('/ ...
React中useEffect的源码解读
前言
对源码的解读有利于搞清楚Hooks到底做了什么，如果您觉得useEffect很“魔法”，这篇文章也许对您有些帮助。
本篇博客篇幅有限，只看useEffect，力求简单明了，带您到React Hooks的深处看看
按图索骥找到Hook相关源码（可以直接跳）
首先我们从Github上得到react的源码，然后可以在packages中找到react文件夹，其中的in ...
关于为什么使用React新特性Hook的一些实践与浅见
前言
关于Hook的定义官方文档是这么说的：
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
简单来说，就是在使用函数式组件时能用上state，还有一些生命周期函数等其他的特性。
如果想了解Hook怎么用，官方文档和阮一峰的React Hooks 入门教程都讲得很清楚了，我建 ...
react之taro介绍
从vue转战react了，今天介绍下第一次用到taro的一个介绍，
1、首页要利用小程序的分包subPackages进行设置，首次加载不要太多
配置
1 config: Config = {
2 pages: [
3 'pages/home/index',//首页
4 'pages/mine/index', // 我的页面
5 'pages/aboutUs/index', // 关于我们
6 ...
React中路由的基本使用
1、React路由介绍
现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。
注意下面我们使用的是React-Router-DOM
React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的
&n ...
