不借助webpack，直接搭建一个 react
其时挺好搭建的，样式就直接写在head中：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const { useMemo } = React
function Button ({ handleClick }) {
return <button onClick={ handleClick }> btn</button>
}
function Alert ({ isVisit }) {
return isVisit ? (
<div>this is a alert!</div>
) : null
}
// useMemo: 类似于 computed，数据缓存
function TestMemo () {
const [count, setCount] = useState(1);
const [val, setValue] = useState('');
const expensive = useMemo(() => {
console.log('compute');
let sum = 0;
for (let i = 0; i < count * 100; i++) {
sum += i;
}
return sum;
}, [count]);
return <div>
<h4>{count}-{expensive}</h4>
{val}
<div>
<button onClick={() => setCount(count + 1)}>+c1</button>
<input value={val} onChange={event => setValue(event.target.value)}/>
</div>
</div>;
}
// useCallback: 为了减少子组件不必要的渲染
const TestCallback = React.memo(function TestCallback ({ value, changeValue }) {
return (
<div>
<h3>测试callback</h3>
<button onClick={ changeValue }>改变有关数据</button>
<p>与 Message 渲染有关的 数据 { value }</p>
</div>
)
})
</script>
<script type="text/babel">
const { useState, useEffect, useCallback } = React
function App () {
const [ isVisit, setIsVisit ] = useState(false)
const [ value, setValue ] = useState(123)
const handleClick = function () {
setIsVisit(true)
}
const changeValue = useCallback(() => {
setValue(value => value + 1)
}, [])
return (
<div>
<h1>Hello, world!</h1>
<Button handleClick={ handleClick }/>
<Alert isVisit={ isVisit }/>
<TestMemo/>
<TestCallback value={ value } changeValue={ changeValue }/>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root') );
</script>
</html>
总结：入门级例子，这里采用 react hooks 展示了一下。webpack 打包把有用的信息进行整合归纳，这里，我们常用的 useState，useEffect，useMemo，useCallback，缺少 useRef
这里，useRef对象，在组件整个钩子中都保持不变，于是可以保存一些实例属性，还有就是 DOM 的获取
