react基础语法

一、注释
在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 = (
  

    
    
    
    
  
);
ReactDOM.render(
  element1,
  document.querySelector("#app")
);