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