该图来自React 官方中文文档 – 用于构建用户界面的 JavaScript 库官方logo
目录
了解
元素是构成 React 应用的最小砖块。
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
React 构建的应用通常只有单一的根 DOM 节点,如果你在将 React 集成进一个已有应用,那么你可以在应用中包含任意多的独立根 DOM 节点。
React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素
在App.js中的事件列表渲染:
import React, { Component } from 'react'
export default class App extends Component {
// 数据
constructor(props){
super(props)
this.state={
msg:"大萨达是<i>ad</i> adasdsdsddasd",
isLog:false,
list:["vue","react","jquery","js"]
}
}
sayHi=(msg="asd")=>{
alert(msg)
}
// sayHi(msg="我爱中国"){
// alert(msg)
// }
render() {
return (
<div>
{/* 更新数据 */}
<button onClick={()=>{
this.setState({isLog:!this.state.isLog},()=>{
console.log("切换回调");
});
}}>切换</button> <br />
{/* 事件渲染 */}
<button onClick={this.sayHi.bind(this,"我爱你bind传参")}>问候-传参</button>
<button onClick={()=>{this.sayHi("我喜欢你")}}>问候-传参</button>
<button onClick={this.sayHi}>问候-许愿</button>
<button onClick={()=>alert("2022新年快乐!")}>问候</button>
{/* 列表渲染 */}
{this.state.list.map(item=><p key={item}>{item}</p>)}
{/* //文本渲染 */}
{this.state.mag}
<div dangerouslySetInnerHTML={
{__html:this.state.msg}}></div>
<hr />
{/* 条件渲染 */}
{this.state.isLog?<p>欢迎你</p>:<p>请登录</p>}
{/* 条件 */}
{this.state.isLog&&<p>中午</p>}
</div>
)
}
}
//类组件
在App.js中的表单绑定:
import React, { Component, createRef } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
msg: "你家啊asd",
};
//创建一个dom引用
this.inpRef = createRef();
}
getVal = () => {
//获取表单值
alert(this.inpRef.current.value);
};
changeMsg=(e)=>{
this.setState({msg:e.target.value})
}
render() {
return (
<div>
{/* 受控表单表单双向绑定 */}
<p>{this.state.msg}</p>
<input type="text" value={this.state.msg} onChange={this.changeMsg} />
<input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)} />
<input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)} />
{/* 非受控表单 */}
<br />
<input type="text" ref={this.inpRef} />
<button onClick={this.getVal}>获取值</button>
</div>
);
}
}
export default App;