react

react navigation引入的第三方库用起来要小心 比较大的变化 CreateAppContainer const MainNavigator = createStackNavigator ( { ... } ) ; const App = createAppContainer ( MainNavigator ) ; 2.Navigator 的 navigationOptions 变成 defaultNavigationOptions，页面里的不变 3.引入了一个第三方库 react-native-gesture-handler 来源： CSDN 作者： .01 链接： https://blog.csdn.net/qq_43340342/article/details/104117137

转发自： https://jspang.com/detailed?id=48#toc290 （P24节） 用结构复制精简代码 现在代码中有好几处 this.props 都是重复的，这时候就可以用 javascript 的解构赋值方法，来精简代码。修改 TodoList.js 中的 Render 函数，把原来带代码修改为下面的代码: //改之前 render() { return ( <div> <div> <input value={this.props.inputValue} onChange={this.props.inputChange} /> <button onClick={this.props.clickButton}>提交</button> </div> <ul> { this.props.list.map((item,index)=>{ return (<li key={index}>{item}</li>) }) } </ul> </div> ); } //改之后 render() { let {inputValue ,inputChange,clickButton,list} = this.props; return ( <div> <div> <input value={inputValue} onChange={inputChange} /> <button

1 安装了这几个插件 3. 安装这个插件 4.创建src文件夹，建立index.js文件。在src同级建立index.html文件 5.创建webpack.config.js 6.npm install –g webpack, npm install –g webpack-dev-server 5. npm install webpack, npm install webpack-dev-server 在项目中再安装一遍 8.npm install babel-loader --save,npm install babel-core –save babel-loader要安装7.1.5版本的，8点几版本的不行，不知道为什么 9.webpack 生成bundle.js文件。 现在改变index.js文件中的内容，刷新浏览器，内容并没有刷新。因为bundle.js文件并没有改变，要想内容改变，必须再webpack生成一次bundle.js. 或者webpack --watch 命令，当index.js中内容改变，刷新浏览器就能刷新内容。 webpack-dev-server命令，当index.js中内容改变，不需要刷新浏览器，内容自动更新。 webpack-dev-server --contentbase src --inline --hot 去掉地址后的尾巴，也能实现上面的功能。

------仅记录个人学习 借助文件名为index时的特性， 再利用import引入文件和react创建class或者function来架接模块之间的链接， 放在Components下面的index.js中进行抛出， 从而集中在一个App.js文件上， 然后再次嫁接在一个index.js文件上完成架构； 以上可以完成一个react多组件框架 TodoHeader中的index.js TodeInput中的index.js TodoList中的TodeItem.js(它被抛出给了同级的index.js) 以上三个通过Components下index.js的集成抛出，在app.js中接收 它是主要操作组件的集成文件 来源： https://www.cnblogs.com/rebackl/p/12244142.html

author: James Kyle + 荆雷 by James Kyle 翻译：荆雷 Install yarn add react - loadable Example import Loadable from 'react-loadable' ; import Loading from './my-loading-component' ; const LoadableComponent = Loadable ( { loader : ( ) => import ( './my-component' ) , loading : Loading , } ) ; export default class App extends React . Component { render ( ) { return < LoadableComponent / > ; } } （下文括号里是译者的注释） 原文地址 https://medium.com/@thejameskyle/react-loadable-2674c59de178 当你有一个很大的应用，把所有代码打成一个单一的包那么应用的启动时间会成问题（现在的前端打包工具在生产环境一般都是把所有 js 拼接压缩成一个长文件，css 拼接压缩成一个长文件，配合 source map 发到用户的浏览器。如果项目使用到的包很多，这个单一的 js

文章目录 一、 `setState()`说明 1.1 更新数据 1.2 推荐语法 1.3 第二个参数 二、 JSX语法的转化过程 三、 组件更新机制 四、 组件性能优化 4.1 减轻state 4.2 避免不必要的重新渲染 五、纯组件 5.1 作用以及使用 5.2 实现原理 六、 虚拟DOM和Diff算法 6.1 虚拟DOM 6.2 Diff算法 6.3 代码演示 小结 一、 setState() 说明 1.1 更新数据 setState() 更新数据是 异步的 注意：使用该语法，后面的 setState 不要依赖前面 setState 的值 多次调用 setState ，只会触发 一次render 1.2 推荐语法 推荐：使用 setState((state,props) => {}) 语法 参数state： 表示 最新的state 参数props： 表示 最新的props 虽然执行起来还是 异步的 ,但多次调用 setState 会再次更新state里的数据 this . setState ( ( state , props ) => { return { count : state . count + 1 } } ) 1.3 第二个参数 场景：在状态更新(页面完成重新渲染)后立即执行某个操作 语法： setState(update[,callback]) this .

搭建一个React工程的方式有很多，官方也有自己的脚手架，如果你和我一样，喜欢刨根究底，从零开始自己一行一行代码创建一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列通过webpack4的配置，从生产和开发环境分别入手，包含代码压缩，大文件gz压缩，webpack4的code split，postcss等插件如何引入，css编译，如何让环境支持各种css预处理器，cssModule配置化，bundle结果分析，本地代理配置，React相关技术栈等等都有一个讲解。本系列教材由浅入深，将会从零开始一步步完善整个脚手架。 前提条件 在开始之前，请确保安装了 Node.js 的最新版本。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。如果你使用旧版本，你可能遇到各种问题，因为它们可能缺少 本教程用到的相关的 package 包。 执行以下命令可以查看你本机安装的node版本: node -v && npm -v 如果你本机的node版本不是最新的，建议升级到新的node版本。node版本建议通过nvm进行管理，了解可以查看 http://nvm.sh 这里不再阐述。 通过本课程，你会学到什么？ 学习完本系列教程，你将会了解（持续更新）

来源： https://www.cnblogs.com/ceceliahappycoding/p/12240771.html

React的生命周期一直迷迷糊糊的,今天彻底把他搞清楚.分享一下 这是 app.js import Life from './day04_Life' import React , { Component } from 'react' export default class App extends Component { constructor ( props ) { super ( props ) this . state = { display : true } } show ( ) { if ( this . state . display ) { return < Life title = "xxxxxx" / > } } render ( ) { return ( < div > { this . show ( ) } < button onClick = { ( ) => { this . setState ( { display : false } ) } } > 卸载 < / button > < / div > ) } } 这是 Life.js 子文件 import React , { Component , cloneElement } from 'react' export default class Life extends Component {

github: https://github.com/react-native-community/react-native-linear-gradient 安装：yarn add react-native-linear-gradient link: react-native link react-native-linear-gradient link后在看看相关的配置 是否会全部都配置上了 使用： <LinearGradient colors={['#FFD801', '#FF8040', '#F75D59']} style={styles.linearGradient}> <Text style={{color:'#fff'}}> Sign in with Facebook </Text> </LinearGradient> linearGradient: { justifyContent:'center', alignItems:'center', width:200, height:50, paddingLeft: 15, paddingRight: 15, borderRadius: 5 }, 效果： 来源： https://www.cnblogs.com/allenxieyusheng/p/7474698.html