单项数据流
ReactDOM.render()
是单向数据流,当数据发生变化时,视图并不会更新
<div id="root"></div>
<script type="text/babel">
let num = 0;
ReactDOM.render((
<input type="button" onClick={() => {
num++;
console.log(num);
}} value={num}/>
), document.querySelector("#root"));
</script>
使用函数包裹自身,调用自身,更新视图
实现+实例
<div id="root"></div>
<script type="text/babel">
let num = 0;
function main() {
ReactDOM.render((
<input type="button" onClick={() => {
num++;
main();
}} value={num}/>
), document.querySelector("#root"));
}
main();
</script>
实现显示隐藏案例
<div id="root"></div>
<script type="text/babel">
let isShow = true;
function main() {
ReactDOM.render((
<div>
<input type="button" value={"显示与隐藏"} onClick={() => {
isShow = !isShow;
main();
}}/>
<div style={{
width: "100px",
height: "100px",
background: "yellow",
display: isShow ? "block" : "none"
}}>
</div>
</div>
), document.querySelector("#root"));
}
main();
</script>