2024年9月reactjs中文文档（React 、React.js、React Native三者关系）
⑴reactjs中文文档（React、React.js、ReactNative三者关系
⑵React、React.js、ReactNative三者关系
⑶React：React是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。React.js:在React框架之上，发展出了React.js框架来开发网页。ReactNative：在React框架之上，发展出来ReactNative用来开发移动应用。ps：因为React基础框架与React.js框架是同时出现、同时进化发展的，这就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。后来，Facebook退出了ReactNative后，也没有把React的相关概念文档从React.js文档中分离出来。这就导致出现了学ReactNative要去看React.js文档，说ReactNative不时会说到React.js的情况。
⑷jsx语法、组件、元素渲染、props、生命周期和state、事件React主要是用于构建用户界面的JavaScript库，实现单页面应用。rea下面代码会先输出，后输出方式：方式：、给元素绑定事件，让this指向当前组件，并修改state的值、定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示
⑸react是一个用于构建用户UI的JS库。.若要使用react创建项目，需全局安装：npm(pm)i-gcreate-react-app。.react里面的交JSX，即javascript+xml。.JSX里面的插入变量，需用{}，里面只支持表达式，不支持语句，例如（ifelse则不能插入.创建一个react项目，命令：create-react-app项目名。.使用react，需在文件找中引入react(核心包)，react-dom(浏览器使用)。.react-dom包含了一个render方法，用于渲染JSX。.constXabc=()=》{return(《h》helloworld《/h》)?}在render中用帕斯卡命名方式引入，例:《Xabc/》???快捷键：rfc.classXabcextendsReact.ponent{render(){return(《div》你好《/div》)}??快捷键：r.在react里面的JSX里，若是空元素，则推荐使用自闭合。.每一个组件的最外层只有一个根元素，在react之后，新增了一个Fragment组件，用于如果您不想生成一层新的空DOM，可使用Fragment，在react中引入{Fragment}.this.props.children是一种特殊的props，表示组件的子元素，相当于Vue里面的solt.如果是函数的方式创建的组件，想获取到props，需在函数的参数里面通过一个形参去获取。.父组件向子组件传参，直接在子组件调用的地方写属性，除字符串以外，都用{}..用class创建的组件，也叫类组件，只有类组件才有state,若是用箭头函数创建的组件，也叫无状态组件（statelessponent.react里面的循环用数组的map实现。.创建state,一种是：直接在class里面：state={}.第二种是constrcutor(){????super();this.state={}}.在react里面，修改state必须在this.setState里面去修改，否则不会反应到render()里面.setState是异步的，若想获取最新的状态，需在setState中再传入一个回调函数，setState(val,)，只有第二个参数才能获取到最新状态，第一个参数可以是一个对象，也可以是一个function，这个function的第一个参数是上一次的state的状态，必须return一个对象。.对于react的方法??.用箭头函数，this则指向react??.在DOM上调用时，用bind(this)改this指向??.不推荐在render里面改指向，可以在constrcutor里面用bind改this。深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。.lodash_.cloneDeep()例如对一个input框进行聚焦事件.引入{createRef}.对需要的DOM元素进行操作.创建.执行（注意要加.current拷贝参考文档：
⑹React文件解释、组件定义及渲染过程
⑺安装node，使用react官方的脚手架工具生成结构，在桌面依次执行下面三行命令node_modules文件夹是存放依赖包yarn.lock：放置的是整个项目所依赖的第三方模块的各种信息（或者是package.json，功能一样，有yarn.lock,执行命令是用yarn，否则用npmREADME.md：放置对项目的描述。可删除文件内容后自行描述。package.json：对项目进行说明，比如项目名字、版本、是否为私有项目、该项目安装的依赖和可执行的npm各种指令要执行start命令，使用npmstart的话，会被自动转为npmrunstart；而要执行build命令的话，必须使用npmrunbuild（项目打包才行。.gitignore：配置不想上传到git的文件、.ico是浏览器中标签页部分的图标，该图标可以到网上搜索一下，自己制作一个；【文件名和后缀名不是固定的，都是可以修改的。但实际开发中，默认都是以favicon.ico命名，便于与其他图片区分开，用来表示地址栏的小图标。所以更推荐使用这个图标时，以favicon.ico命名。】《linkrel=“shortcuticon“href=引入图标文件内设置了移动端适配的meta标签，我们不做移动端的，可以删除文件里引入了manifest.json，我们不需要使用，可以删除它，相应的可以把public下的manifest.json文件也删除；假如浏览器不支持JavaScript，页面上的提示内容在noscript标签内设置。如：《noscript》您的浏览器不支持js，请打开浏览器对js的支持配置项《/noscript》《linkrel=“apple-touch-icon“href=苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。这里可以直接引入css文件importAppfrom’实际是在引入App.js，App是App.js的缩写，写App的时候会先在当前目录下找App.js这个文件；React.StrictMode标签是开启react的严格模式就是一个组件，在index.js中引入，通过render渲染函数，渲染在页面上，并且只能渲染一个标签，可以在外层包裹一个div，里面放各个组件标签名然后在index中，通过reactDOM把app生成的文本，挂载到id为root的标签上，然后index.html上，让父容器的id=root，就渲染成功了。ReactDOM.render(《App/》,document.getElementById(’’));、App.test.js是一个项目的自动化测试文件，可删除class组件名entendsponent｛??????????render()｛??==》?渲染函数???????return（返回出去渲染的内容????????｝｝入口文件index.js中使用render函数挂载到index.html的DOM节点上ReactDOM.render(《App/》,document.getElementById(’’));render函数只能渲染一个标签，index.js或者组件中都是这样，可以在外层包裹一个div，里面放各个组件标签名
⑻reactjs怎么获取文本框的值
⑼目的:获取文本框的值
⑽工具:reactjs
⑾要想获取文本框的值，首先我们需要看一下官方文档的解释：
⑿这里的意思是说当文本框的内容改变的时候，文本框的输入的内容就会作为一个参数进行传递。因此我们就可以获取到文本框里面的内容就好了。
⒀提供以下代码可供参考使用:
⒁constructor?(props)?{?????super?(props)?????this.state?=?{???????screen:?this.initScreen(),???????txtValue:?null,???????dataSource:?new?ListView.DataSource({?????????rowHasChanged:?(row,?row)?=》?row?!==?row???????}),???????loaded:?false?????}???}??。。。。????《TextInput????selectTextOnFocus?=?{true}????onChangeText={(text)?=》?{????this.state.txtValue?=?text????this.getContent()????}}??。。。?/*获取文本框中的值*/?getContent?()?{?????ToastAndroid.show(this.state.txtValue,?ToastAndroid.LONG)???}
⒂React中的不可变性
⒃在React中，有两种改变数据的方式：
⒄对于时间旅行功能，在React中使用不可变性就显得比较重要了，这让数据回溯成为可能。
⒅在ReactFiber架构中，在渲染时，渲染树都有与之对应的备份渲染树（即之前渲染树，在利用不可变性数据后，使得跟踪数据变更变的容易
⒆不可变性的主要优势在于可以帮助我们再React中创建Pureponents,我们可以更容易确定数据是否发生变更，是否需要进行重新渲染。
⒇immutable与immer都是用于解决JS不可变性的问题的库。
⒈immutable为了解决不可变性问题，有自己的一套数据结构：List、Map等，对应这原生JS的各个数据结构，并提供了相应的转换API和工具函数。具体可到官方文档处进行浏览。
⒉immer属于长江后浪推前浪，api更精简，使用更方便。在源码中使用了ES的Proxy对象，来对操作进行拦截并判断数据是否发送变更，来达到实现不可变性
⒊参考.react中文文档——why-immutability-is-important.immutable.js官方文档.immer.js官方文档
⒋reactjs-mobile常用组件
⒌reactjs网站建设中常用的组件,基本涵盖了项目日常所需griddle-reactreact-bootstrapreact-croppercore-jsModularstandardlibraryforJavaScript.IncludespolyfillsforECMAScript,ECMAScript:promises,symbols,collections,iterators,typedarrays,ECMAScript+proposals,setImmediate,etcMaterialUIsuperagentrestful-error-esbrowserifyreact-select-popoverreact-infinite-scrollsemantic-uireact-date-range日期选择react-scroll快速定位滚动react-timer-mixinsuertimerreact-autosuggestautoinputreact-native-swiper轮播react-split-container分割线拖拽reactjs-iscroll下拉上拉刷新react-hammerjs触屏事件库react-emoji-reactemoji表情库react-ace在线器react-highchartshighchartreact-dropzone上传react-fileupload-progress文件上传带processorreact-fontawesome字体icon库react-pdfpdf文档操作react-desktop桌面UIreact-intlInternationalizeReactappsreact-image-gallery图片轮播react-s-alertalertreact-event-calendar事件日历react-color-picker颜色选择器react-lazy-load延迟加载react-tag-inputtaginputrevalidator格式验证react-bootstrap-daterangepicker时间范围react-transitive-number增减数react-css-transition-replace动画react-imagesimagelistreact-clockwall时间画布react-autobindfunautobindreact-simple-markdown-editormarkdownreact-remarkablemarkdown显示random-gem随机数react-masonry-ponent瀑布流react-alap高德地图react-baidu-map百度地图react-swipeable-viewsviews滑动react-swipnable-tabs可横向滚动的tabreact-motion动画react-image-fallback图片lazy加载react-mobile-datepicker滚动选择时间react-images幻灯片灯箱react-image-magnify图片细节放大urlencodenodeencode编码react-mobile-datepicker滚动选择时间年月日react-mobile-datetimepicker滚动选择时间年月日时分react-fastclick消除touchclickms延迟react-sortablereact-anything-sortable拖动排序/-补充/react-autosuggest自动提示react-image-crop图片裁剪ua-deviceua判断系统及版本react-debounce-input输入延迟，适合做autopletereact-big-calendar基于fullcalendar的日程组件^-^欢迎回复交流^-^
⒍React路由怎么传值
⒎处理React组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就是你。我不会讲太多关于data-stores、data-adapters或者data-helpers之类的话题。我下面只专注于React组件本身的交流方式的讲解。React组件之间交流的方式，可以分为以下种：【父组件】向【子组件】传值；【子组件】向【父组件】传值；没有任何嵌套关系的组件之间传值（PS：比如：兄弟组件之间传值一、【父组件】向【子组件】传值初步使用这个是相当容易的，在使用React开发的过程中经常会使用到，主要是利用props来进行交流。例子如下：//父组件varMyContainer=React.createClass({getInitialState:function(){return{checked:true};},render:function(){return(《ToggleButtontext=“Toggleme“checked={this.state.checked}/》);}});//子组件varToggleButton=React.createClass({render:function(){//从【父组件】获取的值varchecked=this.props.checked,text=this.props.text;return(《label》{text}:《inputtype=“checkbox“checked={checked}/》《/label》);}});进一步讨论如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过props传递值的优势就不那么明显了。（PS：所以我建议尽可能的减少组件的层次，就像写HTML一样，简单清晰的结构更惹人爱//父组件varMyContainer=React.createClass({render:function(){return(《Intermediatetext=“whereismyson?“/》);}});//子组件：中间嵌套的组件varIntermediate=React.createClass({render:function(){return(《Childtext={this.props.text}/》);}});//子组件：子组件的子组件varChild=React.createClass({render:function(){return(《span》{this.props.text}《/span》);}});二、【子组件】向【父组件】传值接下来，我们介绍【子组件】控制自己的state然后告诉【父组件】的点击状态，然后在【父组件】中展示出来。因此，我们添加一个change事件来做交互。//父组件varMyContainer=React.createClass({getInitialState:function(){return{checked:false};},onChildChanged:function(newState){this.setState({checked:newState});},render:function(){varisChecked=this.state.checked?’yes’:’no’;return(《div》《div》Areyouchecked:{isChecked}《/div》《ToggleButtontext=“Toggleme“initialChecked={this.state.checked}callbackParent={this.onChildChanged}/》《/div》);}});//子组件varToggleButton=React.createClass({getInitialState:function(){return{checked:this.props.initialChecked};},onTextChange:function(){varnewState=!this.state.checked;this.setState({checked:newState});//这里要注意：setState是一个异步方法，所以需要操作缓存的当前值this.props.callbackParent(newState);},render:function(){//从【父组件】获取的值vartext=this.props.text;//组件自身的状态数据varchecked=this.state.checked;return(《label》{text}:《inputtype=“checkbox“checked={checked}onChange={this.onTextChange}/》《/label》);}});我觉得原文作者用代码不是很直观，接下来我话一个流程走向简图来直观描述一下这个过程：这样做其实是依赖props来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但是在没有任何工具的情况下也是一种简单的实现方式这里会出现一个我们在之前讨论的问题，就是组件有多层嵌套的情况下，你必须要一次传入回调函数给props来实现子组件向父组件传值或者操作。Tiny-Tip:ReactEventSystem在onChange事件或者其他React事件中，你能够获取以下东西：【this】：指向你的组件【一个参数】：这个参数是一个React合成事件，SyntheticEvent。React对所有事件的管理都是自己实现的，与我们之前使用的onclick、onchange事件不一样。从根本上来说，他们都是绑定到body上。document.on(’change’,’input’,function(){...});上面这份代码不是来自于React，只是打一个比方而已。如果我没有猜错的话，React真正处理一个事件的代码如下：varlistenTo=ReactBrowserEventEmitter.listenTo;...functionputListener(id,registrationName,listener,transaction){...varcontainer=ReactMount.findReactContainerForID(id);if(container){vardoc=container.nodeType===ELEMENT_NODE_TYPE?container.ownerDocument:container;listenTo(registrationName,doc);}...}//在监听事件的内部，我们能发现如下：target.addEventListener(eventType,callback,false);这里有所有React支持的事件：中文文档-事件系统多个子组件使用同一个回调的情况//父组件varMyContainer=React.createClass({getInitialState:function(){return{totalChecked:};},onChildChanged:function(newState){varnewToral=this.state.totalChecked+(newState?:-);this.setState({totalChecked:newToral});},render:function(){vartotalChecked=this.state.totalChecked;return(《div》《div》Howmanyarechecked:{totalChecked}《/div》《ToggleButtontext=“Toggleme“initialChecked={this.state.checked}callbackParent={this.onChildChanged}/》《ToggleButtontext=“Togglemetoo“initialChecked={this.state.checked}callbackParent={this.onChildChanged}/》《ToggleButtontext=“Andme“initialChecked={this.state.checked}callbackParent={this.onChildChanged}/》《/div》);}});//子组件varToggleButton=React.createClass({getInitialState:function(){return{checked:this.props.initialChecked};},onTextChange:function(){varnewState=!this.state.checked;this.setState({checked:newState});//这里要注意：setState是一个异步方法，所以需要操作缓存的当前值this.props.callbackParent(newState);},render:function(){//从【父组件】获取的值vartext=this.props.text;//组件自身的状态数据varchecked=this.state.checked;return(《label》{text}:《inputtype=“checkbox“checked={checked}onChange={this.onTextChange}/》《/label》);}});这是非常容易理解的，在父组件中我们增加了一个【totalChecked】来替代之前例子中的【checked】，当子组件改变的时候，使用同一个子组件的回调函数给父组件返回值。三、没有任何嵌套关系的组件之间传值如果组件之间没有任何关系，组件嵌套层次比较深（个人认为层以上已经算深了，或者你为了一些组件能够订阅、写入一些信号，不想让组件之间插入一个组件，让两个组件处于独立的关系。对于事件系统，这里有个基本操作步骤：订阅（subscribe/监听（listen一个事件通知，并发送（send/触发（trigger/发布（publish/发送（dispatch一个事件通知那些想要的组件。下面讲介绍种模式来处理事件，你能点击这里来比较一下它们。简单总结一下：()EventEmitter/Target/Dispatcher特点：需要一个指定的订阅源//tosubscribeotherObject.addEventListener(‘click’,function(){alert(‘click!’);});//todispatchthis.dispatchEvent(‘click’);()Publish/Subscribe特点：触发事件的时候，你不需要指定一个特定的源，因为它是使用一个全局对象来处理事件（其实就是一个全局广播的方式来处理事件//tosubscribeglobalBroadcaster.subscribe(‘click’,function(){alert(‘click!’);});//todispatchglobalBroadcaster.publish(‘click’);()Signals特点：与EventEmitter/Target/Dispatcher相似，但是你不要使用随机的字符串作为事件触发的引用。触发事件的每一个对象都需要一个确切的名字（就是类似硬编码类的去写事件名字，并且在触发的时候，也必须要指定确切的事件。（看例子吧，很好理解//tosubscribeotherObject.clicked.add(function(){alert(‘click’);});//todispatchthis.clicked.dispatch();如果你只想简单的使用一下，并不需要其他操作，可以用简单的方式来实现：//简单实现了一下subscribe和dispatchvarEventEmitter={_events:{},dispatch:function(event,data){if(!this._events){//没有监听事件return;}for(vari=;i《this._events.length;i++){this._events(data);}},subscribe:function(event,callback){//创建一个新事件数组if(!this._events){this._events;}this._events.push(callback);}};otherObject.subscribe(’namechanged’,function(data){alert(data.name);});this.dispatch(’namechanged’,{name:’John’});如果你想使用Publish/Subscribe模型，可以使用：PubSubJSReact团队使用的是：js-signals它基于Signals模式，用起来相当不错。EventsinReact使用React事件的时候，必须关注下面两个方法：ponentDidMountponentWillUnmount在处理事件的时候，需要注意：在ponentDidMount事件中，如果组件挂载（mounted完成，再订阅事件；当组件卸载（unmounted的时候，在ponentWillUnmount事件中取消事件的订阅。（如果不是很清楚可以查阅React对生命周期介绍的文档，里面也有描述。原文中介绍的是ponentWillMount个人认为应该是挂载完成后订阅事件，比如Animation这个就必须挂载，并且不能动态的添加，谨慎点更好因为组件的渲染和销毁是由React来控制的，我们不知道怎么引用他们，所以EventEmitter模式在处理组件的时候用处不大。pub/sub模式可以使用，你不需要知道引用。下面来一个例子：实现有多个product组件，点击他们的时候，展示product的名字。(我在例子中引入了之前推荐的PubSubJS库，如果你觉得引入代价太大，也可以手写一个简版，还是比较容易的，很好用哈，大家也可以体验，但是我还是不推荐全局广播的方式)//定义一个容器varProductList=React.createClass({render:function(){return(《div》《ProductSelection/》《Productname=“product“/》《Productname=“product“/》《Productname=“product“/》《/div》);}});//用于展示点击的产品信息容器varProductSelection=React.createClass({getInitialState:function(){return{selection:’none’};},ponentDidMount:function(){this.pubsub_token=PubSub.subscribe(’products’,function(topic,product){this.setState({selection:product});}.bind(this));},ponentWillUnmount:function(){PubSub.unsubscribe(this.pubsub_token);},render:function(){return(《p》Youhaveselectedtheproduct:{this.state.selection}《/p》);}});varProduct=React.createClass({onclick:function(){PubSub.publish(’products’,this.props.name);},render:function(){return《divonClick={this.onclick}》{this.props.name}《/div》;}});ES:yieldandjs-cspES中有一种传递信息的方式，使用生成函数(genera
⒏react和js语法上的区别讲解
⒐样式class的写法javascript：classreact：className、style的写法（react的驼峰命名javascript：style=“background-color:white“react：style={{backgroundColor:“white“}}、变量（react变量是大括号，js是引号javascript：onClick=“clickSearch(e)“react：onClick={(e)=》this.clickSearch(e)}、资源的引入javascript：css:《linkrel=“stylesheet“href=