<div className="red"> n </div>
// 相当于
React.createElement("div", {
className: "red"
}, " n ");
const Welcome = ()=>{
return(<div>hi</div>)
}
<Welcome name="fanison">Study?<div>Yes</div></Welcome>
// 相当于
var Welcome = function Welcome() {
return React.createElement("div", null, "hi");
};
React.createElement(Welcome, {
name: "fanison"
}, "Study?", React.createElement("div", null, "Yes"));
React.createElement
- 如果传入字符串div,会创建一个div
- 如果传入一个函数，则会调用该函数，获取其返回值
- 如果传入一个类，会在类前面加个new，获取一个组件对象，然后调用对象的render方法，获取其返回值。
函数组件
function Welcome(props){
return <div>Hello,{props.name}</div>;
}
<Welcome name="fanison"/>
类组件
class Welcome extends React.Component{
render(){
return <div>Hello, {this,props.name}</div>
}
}
<Welcome name="fanison"/>
添加 props(外部数据)
- 类组件直接读取属性
this.props.xxx - 函数组件直接读取参数
props.xxx
function App(){
return (
<div className="App">
Outer
<Son messageForSon="Middle 你好" />
</div>
)
}
class Son extends React.Component {
render() {
return (
<div className="Son">
Outer传递参数：{this.props.messageForSon}
<Grandson messageForGrandson="inner 你好"/>
</div>
);
}
}
const Grandson = props => {
return (
<div className="Grandson">
Middle传递参数：{props.messageForGrandson}
</div>
);
};
ReactDOM.render(
<App/>,
document.getElementById('root')
);
添加 state(内部数据)
- 类组件用 this.state读，this.setState 写
setState会异步更新UI，setState之后，state不会立马改变，立马读state会失败，推荐使用setState(函数)setState({n : state.n + 1})，不推荐this.setState(this.state)，不建议修改旧state
- 函数组件用 useState 返回数组，第一项读，第二项写
使用 setN() 更新UI
没有this，一律用函数和变量
class Son extends React.Component{
constructor() {
super();
this.state = {
n:0
};
}
add(){
// this.setState({n: this.state.n + 1 });
// console.log(this.state.n)
this.setState((state)=>{
const n = this.state.n + 1
console.log(n)
return {n}
});
}
render(){
return (
<div className="Son">
Middle n: {this.state.n}
<button onClick={()=> this.add()}> +1 </button>
<Grandson messageForGrandson="inner 你好"/>
</div>
);
}
}
const Grandson = (props)=>{
const [n,setN] = React.useState(0);
return(
<div className="Grandson">
Inner n: {n}
<button onClick={()=>setN(n+1)}>+1</button>
</div>
);
};
复杂 state
类组件
- 类组件的 setState会自动合并第一层属性
- 不会合并第二层属性，需要使用
Object.assign或...操作符
class Son extends React.Component{
constructor() {
super();
this.state = {
n:0,
m:0,
user: {
name: "fanison",
age: 18
}
};
}
addN(){
this.setState({n: this.state.n + 1 });
}
addM(){
this.setState({m: this.state.m + 1});
}
changeUser(){
// m 和 n 不会被置空
this.setState({
user:{
name: "Tom"
// age 被置空
}
})
}
render(){
return (
<div className="Son">
Middle n: {this.state.n}
<button onClick={()=> this.addN()}> n + 1 </button>
Middle m: {this.state.m}
<button onClick={()=> this.addM()}> m + 1</button>
<div>user.name:{this.state.user.name}</div>
<div>user.age:{this.state.user.age}</div>
<button onClick={()=>this.changeUser()}>changeUser</button>
<Grandson />
</div>
);
}
}
合并第二层属性
- 使用
Object.assign
changeUser(){
const user = Object.assign({},this.state.user);
user.name = "Tom";
this.setState({
user:user
});
}
- 使用
...操作符
changeUser(){
this.setState({
user:{
...this.state.user,
name: "Tom"
}
})
}
函数组件
- 函数组件的 setX 不会合并属性
const Grandson = (props)=>{
const [state,setState] = React.useState({
n:0,
m:0
})
return(
<div className="Grandson">
Inner n: {state.n}
<button onClick={()=> setState({n: state.n + 1})}> n + 1 </button> // m被置空
Inner m: {state.m}
<button onClick={()=>setState({m: state.m + 1})}> m + 1 </button>
</div>
);
};
- 使用
...操作符
const Grandson = (props)=>{
const [state,setState] = React.useState({
n:0,
m:0
})
return(
<div className="Grandson">
Inner n: {state.n}
<button onClick={()=> setState({...state,n : state.n + 1})}> n + 1 </button>
Inner m: {state.m}
<button onClick={()=> setState({...state,m : state.m + 1})}> m + 1 </button>
</div>
);
};
- 推荐写法
const Grandson = (props)=>{
const [n,setN] = React.useState(0);
const [m,setM] = React.useState(0);
return(
<div className="Grandson">
Inner n: {n}
<button onClick={()=>setN(n+1)}> n + 1 </button>
Inner m: {m}
<button onClick={()=>setM(m+1)}> m + 1 </button>
</div>
);
};
绑定事件
- 类组件
class Son extends React.Component{
addN = ()=> this.setState({ n:this.state.n + 1})
constructor(){
this.addN = ()=> this.setState({n: this.state.n + 1})
}
addN(){
this.setState({n: this.state.n + 1})
}
}
addN与this.addN是对象本身的属性，这意味着每个Son组件都有自己的addN，如果有两个Son，就有两个addN
addN()是对象的共用属性(也就是原型上的属性)，这意味着所有Son组件共用一个addN
React与Vue区别
- 相同点
- 都是对视图的封装，React是用类和函数表示一个组件，而Vue是通过构造选项构造一个组件
- 都提供了
createElement的XML简写，React提供的是JSX语法，而Vue提供的是模板语法
- 不同点
React是把HTML放在JS里写
Vue是把JS放在HTML里写
