大家都知道，在输入框限制只能输入数字用JS的来判断要考虑的情况比较多，比如中文切换，复制粘贴限制，用reactJS来实现很简单
2.限制输入框的字数
3.即时显示还可以输入多少个字
React： 用于构建用户界面的 JavaScript 库
React起源：Facebook公司出品，13年面世，14年国内引入，同时github受到大量的关注，国内各大公司都会分出专门的人力物力去研究使用。
React的出发点：基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自于Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点是：用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的高性能高效率开发。
React的概念知识：
适用的项目：数据不断变化的大型应用程序，优点：高性能高效率；
React是一个轻量级试图层前端js框架；
React 特点和优势：
1.JSX语法糖
全称为javascript xml，作用是帮助React构建虚拟dom结构，不使用jsx的话，需要使用React.createElement(tagName,options:(id,className),contents..)
使用jsx语法会使react开发更为简单，xml指的只是借鉴了一些XML的语法，标签必须闭合，最外层必须有节点包裹
jsx语法需要编译成React.createElement
2.虚拟dom
React会在js中根据组件的虚拟dom结构来构建出完整的一套虚拟DOMapi，每一次的数据变化React都会重新构建一套完整的虚拟DOM和上一次的虚拟DOM利用DIFF算法计算出不同的地方，重新渲染，因为所有的操作都是在虚拟DOM中，很大程度避免了操作真实DOM，所以性能极高，且React还能将两次连续的数据变化合并到一起
注意：react如何创建虚拟dom，diff算法如何进行对比
3.单向数据流
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了
单向数据流：只要服务端数据发生变动，前端数据也变动
4.组件化开发
React的组件化开发是体现其高效率的地方
组件其实就是html，js，css，image等部分的聚合体，页面结构中独立的功能部分
组件应该拥有的性质：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件； （2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景； （3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护 （4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。
划分组件的原则： 复用率高的，逻辑较为独立的
5. React核心对象
react.js中React,react-dom.js中有一个ReactDOM
6 React的样式和事件
R推荐使用行内样式，这样就可以更大程度保护组件的独立性，事件也需要通过行内设置的方法来设置
7 React组件的props和state
R数据的挂载主要依靠props和state；1.属性（props） 在组件外部传入，或者内部设置，组件内部通过this.props获得2.状态（state） 在组件内部设置或者更改，组件内部通过this.state获得相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）不同点： 属性能从父组件获取，状态不能 属性可以由父组件修改，状态不能 属性能在内部设置默认值 ，状态也可以 属性不在组件内部修改 ，状态要改 属性能设置子组件初始值 ，状态不可以 属性可以修改子组件的值，状态不可以状态只和自己相关，由自己维护属性不要自己修改，可以从父组件获取，也可以给子组件设置组件在运行时自己需要修改的数据其实就是状态而已
8 ref
组件可以在renderdom结构中通过ref对dom、子组件进行标记，在组件里通过this.refs来获取，就可以操作真实DOM和调用子组件的属性方法
9.生命周期
10.组件通信
1.react是一个用于构建用户UI的JS库。
2.若要使用react创建项目，需全局安装：npm(cnpm) i -g create-react-app。
3.react里面的交JSX，即javascript + xml。
4.JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（if else 则不能插入）
5.创建一个react项目，命令：create-react-app 项目名。
6.使用react，需在文件找中引入react(核心包)， react-dom(浏览器使用)。
7.react-dom包含了一个render方法，用于渲染JSX。
1.const Xabc = () =>{ return (<h1>hello world </h1>) } 在render中用帕斯卡命名方式引入，例:<Xabc/> 快捷键：rfc
2.class Xabc extends React.Component { render() { return (<div>你好</div>) } 快捷键：rcc
3.在react里面的JSX里，若是空元素，则推荐使用自闭合。
4.每一个组件的最外层只有一个根元素，在react 16 之后，新增了一个Fragment组件，用于如果您不想生成一层新的空DOM，可使用Fragment，在react中引入{Fragment}
5.this.props.children 是一种特殊的props，表示组件的子元素，相当于Vue里面的solt
6.如果是函数的方式创建的组件，想获取到props，需在函数的参数里面通过一个形参去获取。
7.父组件向子组件传参，直接在子组件调用的地方写属性，除字符串以外，都用{}.
1.用class创建的组件，也叫类组件，只有类组件才有state,若是用箭头函数创建的组件，也叫无状态组件（stateless component）
2.react里面的循环用数组的map实现。
3.创建state,一种是：直接在class里面：state= {}
4.第二种是constrcutor () {
super()
this.state = {}
}
1.在react里面，修改state必须在this.setState里面去修改，否则不会反应到render()里面
2.setState是异步的，若想获取最新的状态，需在setState中再传入一个回调函数，setState(val,[callback])，只有第二个参数才能获取到最新状态，第一个参数可以是一个对象，也可以是一个function，这个function的第一个参数是上一次的state的状态，必须return一个对象。
3.对于react的方法
1.用箭头函数，this则指向react
2.在DOM上调用时，用bind(this)改this指向
3.不推荐在render里面改指向，可以在constrcutor里面用bind改this。
深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。
5.lodash
_.cloneDeep()
例如对一个input框进行聚焦事件
1.引入{createRef}
2.对需要的DOM 元素进行操作
3.创建
4.执行（注意要加 .current）
拷贝参考文档：https://segmentfault.com/a/1190000011403163
