react

react 生命周期方法有哪些？ React 16.3+ getDerivedStateFromProps ：在调用 render （）之前调用，并在每次渲染时调用。需要使用派生状态的情况是很罕见的 componentDidMount ：首次渲染后调用，所有的 ajax 请求、 DOM 或状态更新、设置事件监听器都应该在此处发生。 ShouldComponentUpdate ：确定组件是否应该更新。默认情况下，它返回 true 。如果你确定在更新状态或属性后不需要渲染组件，则可以返回 false 值。它是一个提高性能的好地方，因为它允许你在组件接收新属性时阻止重新渲染。 getSnapshotBeforeUpdate ：在最新的渲染输出提交给 DOM 前将会立即调用，这对于从 DOM 捕获信息（如：滚动位置）很有用。 componentDidUpdate ：它主要用于更新 DOM 以响应 prop 或 state 更改。如果 shouldComponentUpdate （）返回 falsse ，则不会触发。 componentWillUnmount ：当一个组件被从 DOM 中移除时，该方法被调用，取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。 React 16.3 componentWillMount ：在组件 render （）前执行

原生JS中有：document.getElementById("idName");来拿到需要的元素 但是在react中，显示这是不对的，不过有一个 属性 ，叫 ref ，是用来拿到某个元素的 ref属性是用在render(){};里面的某个标签里面的，比如：<div ref={ item => this. audioNode = item} ></div> 【这是react里面的写法】 ref作用的对象是当前的元素，比如上一行就是<div></div>对应得元素 附：每一个组件类的 实例化对象 是这个组件类对应的标签，但不是html标签，例如： class HelloWorld extends Component { 　　render(){ 　　　　return( 　　　　　　 <HelloWorld /> 　　　　); 　　} } 来源： https://www.cnblogs.com/songmengyao/p/7366454.html

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components. There are two ways to code for different platform. 1. Using 'Platform' from 'react-native' package. import {Platform} from 'react-native'; ... render() { if(Platform.OS === 'ios') { let info = <Text>From ios</Text> } else if(Platform.OS === 'android'){ let info = <Text>From Android</Text> } } This way

React 组件在 加载时将 DOM 元素传入 ref 的回调函数，在卸载时则会传入 null 。ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。 当 ref 属性用于使用 __ class 声明的自定义组件 __时，ref 的回调接收的是已经加载的 React 实例 。 Refs 与函数式组件 你不能在函数式组件上使用 ref 属性，因为它们没有实例 ps: 可以在函数式组件内部使用 ref，只要它指向一个 DOM 元素或者 class 组件 对父组件暴露 DOM 节点 function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); } } 来源： https://www.cnblogs.com/changlon/p/8128311.html

最近写博客写的有点蒙圈了，甚至在怀疑自己应不应该写下去，看看网上大神写的博客，简直了。。。！昨天给自己放了一天假，虽然离职找工作之中，也在自我督促自己学习一下！我基本写的都是最基本的内容！ 好了，不多说了！继续更新！ 1、React支持一种非常特殊的属性ref，你可以用来绑定到render()上，输出的任何组件上！ 2、通过一个小demo练习来解析！我们要实现一个简单的功能，点击按钮，实现求和！ <div id="container"></div><script type="text/babel"> var Add = React.createClass({ handleClick:function () { //通过原生DOM的API获取input的value值 var num1 = parseInt(this.refs.input1.value); var num2 = parseInt(this.refs.input2.value); console.log(num1+num2) }, render:function () { //当组件插入到DOM后，ref 属性添加一个组件的引用于到 this.refs return <div> <input ref="input1" placeholder="input number"/> <br/> <input ref=

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case ( borderRadius ) instead of kebab-case ( border-radius ). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements. Feeling using Recompose is a good way to build npm module, custom libaray. So the comoponent can be highly custmizable. import React from 'react'; import {setDisplayName, componentFromProp, mapProps, defaultProps, compose} from 'recompose'; import

背景 毕业已两年多时间，从毕业实习开始一直是做iOS客户端开发，期间待过两家公司，参与或独立开发了6个上线项目，现在所在公司是一家正在智能家居行业谋求转型的传统控制器制造公司。公司整个新业务团队有近300号人，iOS技术组稳定在20号人左右。从一开始入职我就处于忙绿状态，所以常和同事笑说：“来这一个月的加班时长超过我在上家公司一年的量”，虽然有时候加班也累但我却并不觉得苦，毕竟对于成长期的我在这里学到了不少东西，比如：智能硬件蓝牙开发，硬件socket通讯，组件化开发，Hybrid混合开发等。身处IT行业你一定能深刻感受到前端技术在这两年的火爆程度，自然我们公司也在跟随这股浪潮，自去年中旬开始公司所有新立项的项目均采用Hybrid混合开发模式，具体逻辑就是：UI界面(除少数框架性界面)由前端构建+网络通讯原生代理+设备的蓝牙或者socket交互由原生处理。这样下来iOS开发人员能做的工作就越来越少了，所以我需要扩展自己的前端开发能力，至于我为什么选React？主要原因在于公司的前端技术组目前就在使用React。以下有一篇发布在 Medium 上的文章可以帮助你对比React和Vue。 参考 React or Vue: Which Javascript UI Library Should You Be Using? 简要译文： 2016年React巩固了它作为前端框架之王的地位

React 组件生命周期 React 组件的生命周期函数，又叫钩子函数，它能响应不同的状态。 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

一.MVX框架模式了解 MVX框架模式：MVC+MVP+MVVM 1.MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。 View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。 用户User通过控制器Controller来操作模板Model从而达到视图View的变化。 2.MVP：是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。 在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。 并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。 MVP模式的框架：Riot,js。 3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。 View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。 这种自动同步是因为ViewModel中的属性实现了Observer