anu
anu copied to clipboard
Published
20 hours ago •
RubyLouvre
RubyLouvre
React Hook的支持
主要参见外国人的例子，https://www.youtube.com/watch?v=4b8jxigTfRI&feature=youtu.be&a=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--
<script src="https://cdn.bootcss.com/react/16.7.0-alpha.2/umd/react.development.js"></script>
<script src="./react-dom.development.js"></script>
-->
<script src="./dist/React.js"></script>
<script type='text/javascript' src="./lib/babel.js"></script>
</head>
<body>
<div id='root' class="root">
</div>
<script type='text/babel'>
var container = document.getElementById('root');
var div = container;
if (!window.ReactDOM) {
window.ReactDOM = React;
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a, 'vs', b, a === b);
},
toEqual(b) {
console.log(a, 'vs', b, a + '' === b + '');
},
toThrow(){
try{
a()
}catch(e){
console.log(e,"catch")
}
}
};
};
var {useState,useCallback} = React;
var last
function App (){
const [count, dispatch] = useState(5);
function increment(){
dispatch(p => p + 1 )
}
console.log(last, increment === last )
last = increment;
return <div>
<button type='button' onClick={increment}>{ count }</button>
</div>
}
ReactDOM.render(<App />, container)
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!--
<script src="https://cdn.bootcss.com/react/16.7.0-alpha.2/umd/react.development.js"></script>
<script src="./react-dom.development.js"></script>
-->
<script src="./dist/React.js"></script>
<script type='text/javascript' src="./lib/babel.js"></script>
</head>
<body>
<div id='root' class="root">
</div>
<script type='text/babel'>
var container = document.getElementById('root');
var div = container;
if (!window.ReactDOM) {
window.ReactDOM = React;
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a, 'vs', b, a === b);
},
toEqual(b) {
console.log(a, 'vs', b, a + '' === b + '');
},
toThrow(){
try{
a()
}catch(e){
console.log(e,"catch")
}
}
};
};
var {useState,useCallback} = React;
var last
function App (){
const [count, dispatch] = useState(5);
var increment = useCallback(() => {
dispatch(p => p + 1 )
}, [])
console.log(last, increment === last )
last = increment;
return <div>
<button type='button' onClick={increment}>{ count }</button>
</div>
}
ReactDOM.render(<App />, container)
</script>
</html>
小程序无法用Hooks，原因是页面上所有数据都是this.state.xxx, this.props.yyy， 而函数式组件没有this。详见 https://rubylouvre.github.io/nanachi/documents/jsx.html