单项数据流
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>