本节主要针对之前的ToDoList代码做下优化（1）删除无用构造器　　　　   　　（2）解构赋值优化this.props取值　　　　优化如下　　注意位置：解构赋值语法定义的局部变量要写在render内部    （3）无状态UI组件抽离　　将当前组件...

接着之前的react-redux完善ToDoList案例，实现点击按钮，添加列表项功能（1）添加按钮响应事件　　 （2）编写映射关系 　　   （3）编写reducer.js进行state的业务逻辑处理　　　　测试如下，此时便完成了列表数据的添加操作　　 &n...

目前为止的ToDoList案例已经可以正常展示，但是还不能修改编辑，如下所示 此时控制台报错提示，缺少onChange响应事件，所以接下来编写响应事件，改变state状态值。（1）通常做法　　之前的做法都是绑定具体方法进行调用，如下所示，绑定handleInput方法，当输入值时进行输出打印　　 　...

本节主要介绍react-redux的两个知识点：1、提供器Provider；2、Connect连接器。（1）提供器provider　　被Provider包裹的组件，可以直接获取store仓库的状态值，用法如下　　 　　只要被Provider包裹的组件都可以方便获取store　　（2）连接器Connect　　提...

（1）初始化项目　　安装完毕后，删除src下其他文件，留下index.js入口文件，如下所示　　  　　接下来首先安装redux和react-redux依赖（因为react-redux依赖redux，是在redux基础上建立起来的）>npmireduxreact-redux--save　　　　...

React动画通常有三种方法实现从易到难为：1、transition（CSS3自带）2、animation（CSS3自带）3、react-transition-group动画库（需要引入插件）  react生态圈十分庞大，类似于动画库有很多，这里我们介绍一款react-transition-grou...

一、transition（CSS3自带）1、用法示例：1234.hide{  /*过渡动画效果*/　opacity:1;  transition:all1sease-in;}　含义：透明度在1s内从0渐变为1 2、transition其他参数建议参考（http://ww...

本节介绍下React+Axios实现远程数据请求 这里注意：axios是一个独立程序，本质就是对AJAX的封装，可以和很多框架结合使用。（1）安装依赖>npmiaxios--save　　  （2）引入使用　　建议在componentDidMount生命周期函数里进行数据请求，这里我们...

之前已经介绍过了React的相关生命周期，这里介绍下通过生命周期函数componentWillReceiveProps实现组件性能优化。之前案例中的组件存在性能问题，即父组件的state更新时频繁渲染了子组件，也就是说父组件的输入框的值改动造成了子组件render的频繁触发渲染，性能上存在缺陷。 （1）设置调...

   综上所示，React生命周期钩子可以分为4个大阶段1、Initialization初始化阶段2、Mounting虚拟DOM挂载阶段3、Updation组件更新阶段4、Unmounting组件卸载阶段　　通俗理解，就是在组件的某一时刻，自动执行的函数。从这个角度来看的话，constru...

学习react的同学肯定看过这种写法 注意这里的ref，写法为ref={(input)=>{this.input=input}}等价于ref={input=>this.input=input}等价于ref={(input)=>this.input=input}这里主要是ES6箭头函数arro...

　　基本类型校验：　　之前的案例中，父组件向子组件传递的数据里，并没有做数据类型校验　　　　虽然正确传递和使用了，但是在子组件里并没有做传递数据的类型验证，也就是说，此时传递任何值都不会报错。开发经验丰富的小伙伴都知道，当项目复杂性较大时，如果不对数据类型做校验，后期很容易出现一种错误，即“业务逻辑错误&r...

Facebook为了方便调试React代码，推出了ReactDeveloperTools调试工具，方便开发者高效快速调试代码。下载方式，利用Chrome的拓展程序　　 　　添加后该图标便会放到页面右上角，该图标有几种状态，测试如下1、打开淘宝发现图标灰色，说明淘宝没有使用react 　　2、打开知乎...

我们使用create-react-app脚手架时，会发现入口文件index.js中有这样一个引入使用。 这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为react项目注册了一个serviceworker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是...

JSX支持遍历语法，如下　　　　   　　除了上面数组遍历方式，还有另一种，如下所示　　　　结合for循环（外部）　　注意：主流循环写法是map，jsx里面不能用for循环，因为for循环不是表达式。可以用Array::map方法，注意给返回的每一个组件设置一个唯一的key。 &...