React.createClass有一个内置功能,自动绑定所有方法this。React的类模型无此功能。当使用ES6的class语法来创建组件,react本身取消了这种自动绑定this的功能,要使得this正确指向生成的组件实例,要使用bind或者箭头函数。
this.handleClick = this.handleClick.bind(this);
<div onClick={() => this.handleClick()}> ;
React官网上提到,可以在componentDidMount中发送网络请求,这也是一般情况下的最佳实践。
每个React组件都有自己的 state,其与 props 的区别在于 state只存在组件的内部,props 在所有实例中共享。
1. props是一种父级向子级传递数据的方式,切是单向的,只会从父组件传到子组件;
2. props是只读的。
3. props是组件唯一的数据源,上层组件的prop改变会递归地向下遍历整棵组件树,重渲染用此属性的组件。
react把每一个组件都看成是一个状态机,组件内部通过state来维护组件状态的变化,这也是state唯一的作用。
每次修改 state,都会重新渲染组件,实例化后通过 state 更新组件。
调用this.setState (并不是一次setState会触发一次render,React可能会合并操作,再一次性进行render)。
ReactDOM.findDOMNode(this.refs.xxx)来找到实际的节点
`ref`可挂组件上也可dom元素上;
-
挂到组件(
class
声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例: -
挂载到dom元素上时表示具体的dom元素节点。
ref 属性可接受一个回调函数,在组件被加载或卸载时会立即执行。
-
当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。
-
当给组件添加 ref 属性时,ref 回调接收当前组件实例作为参数。
-
当组件卸载的时候,会传入null
-
ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
可以为组件或元素设置key属性,key用来标识这个组件或元素。key不需要全局唯一,只需要在兄弟组件或兄弟元素间保证唯一性就可以。key常用到集合(List)元素中。不要使用元素在集合中的索引值作为key。
React 官方正式发布了 v16.3 版本。在这次的更新中,除了前段时间被热烈讨论的新 Context API
之外,新引入的两个生命周期函数 getDerivedStateFromProps
,getSnapshotBeforeUpdate
以及在未来 v17.0 版本中即将被移除的三个生命周期函数 componentWillMount
,componentWillReceiveProps
,componentWillUpdate
.
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。
ReactDOM.findDOMNode(component)
getDOMNode: this.refs.mainC.getDOMNode()
-- jquery对象
var _$this _= $(ReactDOM.findDOMNode(this));
var _$this _= $(e.target);
$(this.refs.regSch)
延展操作符用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。
var _props _= {};
props.foo = x;
props.bar = y;
var _component _= <Component {...props} />;
//等价于
var _component _= <Component foo={x} bar={y} />;
它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:
var _props _= { foo: 'default' };
var _component _= <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
**static propTypes **= {
name: PropTypes.string
}
某个组件只要往自己的 context 里面放了某些状态,这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问,它的父组件是不能访问到的,你可以理解每个组件的 context 就是瀑布的源头,只能往下流不能往上飞。
教程:
http://huziketang.com/books/react/lesson29
React.Children 是顶层API之一,为处理 this.props.children 这个封闭的数据结构提供了有用的工具。
this.props 对象的属性与组件的属性一一对应,但是 this.props.children 属性表示组件的所有子节点。
this.props.children 的值有三种可能:
如果当前组件没有子节点,它就是 undefined ;
如果有一个子节点,数据类型是 object ;
如果有多个子节点,数据类型就是 array 。
可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。
React.Children.forEach类似于 React.Children.map(),但是不返回对象。
组件运行中生命周期函数被触发的条件:
● 当父组件修改子组件的属性props时;
● 当组件自身修改状态state时。
静态初始化getDefaultProps(只会调用一次)
首次实例化getInitialState/constructor**》componentWillMount》render》componentDidMount
存在期componentWillReceiveProps》shouldComponentUpdate》componentWillUpdate》render》**componentDidUpdate
销毁期componentWillUnmount
作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。
作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。getInitialState 和 getDefaultPops 的调用是有区别的,getDefaultPops 是对于组件类来说只调用一次,后续该类的应用都不会被调用,而 getInitialState 是对于每个组件实例来讲都会调用,并且只调一次。
在完成首次渲染之前调用,该方法在首次渲染之前调用,也是再 render 方法调用之前修改 state 的最后一次机会。一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等
必选的方法,创建虚拟DOM,在每次调用setState方法时,React会自动执行render方法来更新虚拟DOM,如果组件已经被渲染,那么还会更新到DOM中去。
1. 只能通过this.props或this.state访问数据
2. 只能出现一个顶级组件(不能返回数组)
3. 可以返回null、false或任何React组件
4. 不能对props、state或DOM进行修改
真实的DOM被渲染出来后调用,在服务端中,该方法不会被调用。 该方法被调用时,已经渲染出真实的 DOM,可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。此时已可以使用其他类库来操作这个DOM。
当挂载的组件收到新的props时,调用此函数,在初始化渲染的时候,该方法不会调用。对外部传入的数据进行一些预处理,该方法用于比较this.props和nextProps,当两者不同的时候,使用this.setState()来改变state。
猜测:
当组件的属性可能发生变化时,这个方法会被调用。这里说可能,是因为父组件render方法每次被调用时,子组件的这个方法都会被调用(子组件第一次初始化时除外)
当挂载的组件收到新的props、state时时,调用此函数,做出是否更新dom的决定,返回false表示跳过后续的生命周期方法。通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用。
React提供了一个React.PureComponent组件,这个组件重写了shouldComponentUpdate,会对前后两次的state和props进行浅比较,如果不一致,才会返回true,触发后续的render方法。这里的浅比较指,只会对state和props的第一级属性进行比较(使用!==),这满足一般的使用场景。
接收到新的props或者state后,在组件重新渲染之前执行,在渲染之前最后的props和state都发生了改变,这个函数使用很少,一般用在日志和记录的打印。 不可以在这个方法中修改props或state,如果要修改,应当在componentWillReceiveProps()中修改。
完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。当组件重新渲染完毕后调用,即完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。
组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。因此可以在这个方法中销毁非React组件注册的事件、插入的节点,或者一些定时器之类。这个过程要小心处理,如果处理不当可能导致内存泄漏,比如实例化了某个第三方插件却没销毁。这个函数很少用到,因为浏览器本身具有垃圾回收机制
举列子
// Correct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
--------------dom操作--------------
-- jquery对象
var _$this _= $(ReactDOM.findDOMNode(this)); this=this.refs.componentName
var _$this _= $(e.target);
$(this.refs.regSch)
--------------作为属性使用--------------
dangerouslySetInnerHTML={{__html: reminder}}
Link
1. url?hosId=225
实际效果: <a href='url?hosId=225'>deptName </a>
组件获取传参:this.props.location.query;
2.<Link to={{pathname:url,query:{hosId:1332}}}> {deptName} </Link>
实际效果: <a href='url?hosId=225'>deptName </a>
组件获取传参:this.props.location.query;
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx71af21a4dcabb07b&redirect_uri=http%3A%2F%2Fm.hsyuntai.com%2Fcloud%2F310000%2FonlineConsult%2FchooseDoctor&response_type=code&scope=snsapi_base&state=weixinAuthorize#wechat_redirect
histroy 属性
Router组件的history属性,用来监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。
history属性,一共可以设置三种值。
● browserHistory
● hashHistory
● createMemoryHistory
如果设为hashHistory,路由将通过URL的hash部分(#)切换,URL的形式类似example.com/#/some/path。
如果设为browserHistory,浏览器的路由就不再通过Hash完成了,而显示正常的路径example.com/some/path,背后调用的是浏览器的History API。
createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象,不与浏览器URL互动。