一、注释
在js写xml就是jsx语法
const element = <div>
{
//jsx单行注释
/*
jsx多行注释
*/
}
<h1>Hello World</h1>
</div>;
ReactDOM.render(
element,
document.querySelector("#app")
);
//返回jsx
function fn(){
return ( //这是js注释
<div>
{/*这是jsx注释*/}
<h1>Hello World</h1>
</div>
)
}
const element = fn();
ReactDOM.render(
element,
document.querySelector("#app")
);
二、插值
const person = {
name : "张三",
age : 18,
sex : 0,
like : "女"
}
function getSex(){
if(person.sex){
return "性别：女";
}
return "性别：男";
}
const element = (
<div>
<h2>Hello React</h2>
<h2>我是：{person.name}</h2>
<h2>今年：{person.age}</h2>
<h2>性别：{person.sex}</h2>
<h2>
{getSex()}
</h2>
{
//jsx里面不能 if else 判断，可以用三元表达式，也可以调用函数
}
<h2>{person.sex?'女':'男'}</h2>
<h2>爱好：{person.like}</h2>
<h3>
{
//自执行函数也可以，在花括号里面是正儿八经的js代码
(function(){
if(person.sex){
return <i>性别：女</i>;
}
return <i>性别：男</i>
})()
}
</h3>
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
);
三、节点属性
const element = (
<div>
{
//class -> className
//单标签一定闭合
//value ->defaultValue
//checked -> defaultChecked
//从数据结构里面取值
}
<h2 className="active">标题</h2>
<input type="button" defaultValue="123" title="123" />
<input type="radio" defaultChecked />
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
);
四、列表渲染
//数据可以是数字、字符串、标签（不要加引号，加了引号就是字符串，要绑定key唯一标识，提升性能diff）
const arr = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [<li key="1">1</li>, <li key="2">2</li>, <li key="3">3</li>];
const element = (
<ul>
{arr3}
</ul>
);
const arr4 = [
{
name:"张三",
age:18
},
{
name:"李四",
age:18
}
];
const element2 = [];
arr4.forEach((item, index) => {
element2.push(<li key={index}>name：{item.name} - age：{item.age}</li>);
})
const element3 = (
<div>
<h2>
{
//如果数据是json对象，要用JSON.stringify编译成字符串，当做文本插入到页面中
}
{JSON.stringify(arr4)}
</h2>
<ul>
{
(function(){
const element4 = [];
arr4.forEach((item, index) => {
element4.push(<li key={index}>name：{item.name} - age：{item.age}</li>);
})
return element4;
})()
}
</ul>
</div>
);
ReactDOM.render(
element3,
document.querySelector("#app")
);
五、事件处理
function fn(){
alert(1)
}
const element = (
<div>
{
//onClick 事件驼峰命名
//事件绑定，都会给一个事件处理函数
}
<input type="button" defaultValue="事件调用" onClick={fn} />
<input type="button" defaultValue="行间函数" onClick={()=>{alert(123)}} />
<input type="button" defaultValue="行间函数" onLoad={alert(456)} />
</div>
);
ReactDOM.render(
element,
document.querySelector("#app")
);
六、无状态组件
let a = 123;
const element = (
<div>
{a}
</div>
);
//只是普通的变量是没有状态的，组件才有状态或无状态
//react是单向数据流
//状态其实就是让数据驱动视图的响应式数据
ReactDOM.render(
element,
document.querySelector("#app")
);
//不会改变
setTimeout(()=>{
a = 456;
}, 3000)
七、函数式组件
//这只是一个目标变量
const header = (
<h2>头部</h2>
)
const main= (
<h2>主体</h2>
)
const footer= (
<h2>底部</h2>
)
//这只是一个目标变量，没有状态
const element = (
<div>
{header}
{main}
{footer}
</div>
);
//函数式声明组件
//组件的名字首字母必须是大写
//也不要用H5新标签
function Hd(){
return (
<h2 className="hd"></h2>
)
}
//组件传值，这个也是无状态的组件，没有数据变化，视图也跟着变化
//状态其实就是让数据驱动视图的响应式数据
function Con(props){
return (
<h2 className="main">主体内容，{props.name}</h2>
)
}
function Ft(){
return (
<h2 className="footer">底部</h2>
)
}
//有状态的组件 -> 让数据驱动视图的响应式数据
class MainCon extends React.Component{
constructor(){
super();//调用父组件的构造函数，不调用会报错
//state就是组件的状态
//从后端请求的数据都是挂载state（状态）上
//相当于Vue的data
this.state = {
name : "张三"
}
setTimeout(()=>{
this.setState({
name:"李四"
});
}, 3000)
}
render(){
return (
<div>
<h3>内容{this.state.name}</h3>
</div>
)
}
}
const element1 = (
<div>
<Hd />
<Con name="函数式声明组件" />
<Ft />
<MainCon />
</div>
);
ReactDOM.render(
element1,
document.querySelector("#app")
);
