React #8
Comments
|
http://facebook.github.io/react/docs/events.html Event SystemSyntheticEvent 合成的 事件,就是react给DOM Event对象的wrapper 属性
|
|
event.isTrusted
什么时候是false呢 |
mixinswikipedia 上说
react document 上说
然后是例子 var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
}
});其实minxin 属性做的操作就是 把mixins里面的方法extend到createClass方法的specifation参数里面 |
|
|
if(module){
var Reflux = require('reflux');
}
var actions = Reflux.createActions([
'A','B'
].map(function(s) { return 'action'+s }))
var a_store = Reflux.createStore({
init:function() {
this.listenToMany(actions)
},
onActionA: function() {
console.log(arguments);
},
actionA: function() {
console.log("都有看你怎么办...");
},
actionB: function(arg1,arg2) {
console.log(arg1,arg2);
}
})
actions.actionA("hello","world")
actions.actionB("this is arg1","this is arg2")
console.log(a_store);结果 store listenTo 一个action,调用action -> store -> component -> DOM |
|
gist : https://gist.github.com/spoike/ba561727a3f133b942dc action
store
|
state 与 props一开始有state, state可变, setState() 会导致重新绘制, 然后 import { createClass } from 'react'
let A = createClass({
render: ()=>{
retrun (
<B foo={ this.state.bar } />
)
}
})就是说, A.state.bar 传给B.props.foo, 这样A重绘时, 导致B重绘, 类似 entry 区别http://www.ruanyifeng.com/blog/2015/03/react.html
区别 from 官网
|
reduxhttps://github.com/rackt/redux core notes
usageTODO |
react 常用包warningwarning(false, 'warning')当前面值为 false, 显示 warning invarianthttps://github.com/zertosh/invariant invariant(someTruthyVal, 'This will not throw');
// No errors
invariant(someFalseyVal, 'This will throw an error with this message');
// Error: Invariant Violation: This will throw an error with this messagehoist-non-react-statics将非js保留关键字, 非 react 关键字的 Component 属性加到上一层
|
find React instance by dom像 Vue 一样, Object.defineProperty(Node.prototype, '__react__', {
enumerable: false,
configurable: true,
get() {
let dom = this
let key = Object.keys(dom).find(key=>key.startsWith("__reactInternalInstance$"));
let internalInstance = dom[key];
if (internalInstance == null) return null;
if (internalInstance.return) { // react 16+
return internalInstance._debugOwner
? internalInstance._debugOwner.stateNode
: internalInstance.return.stateNode;
} else { // react <16
return internalInstance._currentElement._owner._instance;
}
}
}) |
empty prop valuefacebook/react#2166 null & undefined
|
useEffect & useLayoutEffecthttps://zhuanlan.zhihu.com/p/348701319 看了依然没看懂....
|
2022 react 生态 |
状态管理valtio上一条帖子中发现的, 还算好用 #141 |
useSyncExternalStore
解释 API
使用因为这个 API 以 hooks 的形式存在, react-redux 的 connect hoc, 也是使用 FC 包了一层 |
react@18 + TypeScript
breaking change: 之前不需要手动标注 children prop, @types/react@18 需要手动添加 children type interface Props {
+ children?: React.ReactNode;
} |
|
input 受控组件光标跳到最后
hooks 版 const inputRef = useRef<{
input: HTMLInputElement
selectionStart: number | null
selectionEnd: number | null
} | null>(null)
useLayoutEffect(() => {
if (!inputRef.current) return
const { input, selectionStart, selectionEnd } = inputRef.current
input.selectionStart = selectionStart
input.selectionEnd = selectionEnd
inputRef.current = null
}, [searchKeyword])
// ...
<input value={searchKeyword} onChange={e => {
const input = e.target
inputRef.current = {input, selectionStart: input.selectionStart, selectionEnd: input.selectionEnd}
// update searchKeyword state
}} />or 简洁点的 function createInputRecoverAction(input: HTMLInputElement) {
const { selectionStart, selectionEnd } = input
return () => {
input.selectionStart = selectionStart
input.selectionEnd = selectionEnd
}
}
const inputActionRef = useRef<(() => void) | null>(null)
useLayoutEffect(() => {
inputActionRef.current?.()
inputActionRef.current = null
}, [searchKeyword])
<input value={searchKeyword} onChange={e => {
const input = e.target
inputActionRef.current = createInputRecoverAction(input)
// update searchKeyword state
}} /> |
Links
react Component Specifications
通过
react.render创建component时提供定义的对象render()
返回一个 single child component
return null or false , 表示不想渲染任何东西 , 此时 this.getDOMNode() => false
getInitialState()
在组件被加载之前调用一次,此函数的返回值作为
this.state的值getDefaultProps()
只调用一次,并cache起来,每个实例的getDefaultProps() 返回的是同一个
propTypes
说明prop的类型
mixins
Array类型,允许在不同的组件之间共享行为...
???????????
???????????
???????????
可以定义静态方法,通过 ComponentClass.static_method 调用
used in debugging messages
生命周期相关方法
componentWillMount
只调用一次,both on client and server ??? react是client端吧???
在初始render之前
componentDidMount
只在初始render之后调用一次,在这个时候,component有了真实的DOM节点,通过
this.getDOMNode()获取componentWillReceiveProps
当一个组件正在接受新的props时调用,在
render()的时候没有调用...使用这个方法来在
render()方法之前,根据props来设置stateshouldComponentUpdate
收到新的props或者state时要重新调用render之前调用这个
最开始的render调用之前,没有调用此方法
调用
forceUpdate时,不会调用此方法接收的两个参数,(newProps,newState) 用来判断,是否需要重新update
当上面那个should返回true的时候,接着调用这个,可以设置一些state
在组件更新之后,可以使用这个方法来操作真实的节点
两个参数
(prevProps,prevState)组件从DOM里卸载之前立即调用,做一些清理工作,例如可以清理一些timer,一些在
componentDidMount里创建的DOM节点The text was updated successfully, but these errors were encountered: