react基础语法

一、注释
在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")
);