react知识点

react行内样式

style={{color: "red"}}

箭头函数渲染组件时

{/* 箭头函数带{}需要加上return */}

{users.map((user, i) => {
  return <User user={user} key={i} />;
})}
{/* 箭头函数不带{} */}
{users.map((user, i) => (
  <User user={user} key={i} />
))}

jsx是React.createElement(componet,props,…children)函数的语法糖

强烈推荐使用箭头函数，可以不用显示绑定this,

原：this.handleClick.bind(this); 
 
新：handleClick = () => {
     console.log('handleClick', this); 
 }

React.Fragment支持render多个并列标签,语法糖<></>,但语法糖方式不支持属性值

// 可以用来渲染子元素,避免tr包裹的td中渲染后出现多余的div标签
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

setState是异步的，在设置页面某些state的时候，需要先设置好state，然后再对页面的一些参数进行修改的时候，可以使用setState的回调函数。

打开新窗口 ，发现一个 a标签rel属性(这个属性通常在 设置 target=_blank之后使用) ，尝试设置，成功解决问题。

<a target='_blank' rel='noopener noreferer' ></a>

a标签添加点击事件不触发默认事件（herf={null}），download可支持下载注意同域下载

​<a href={null} download={fileName} onClick={this.handelClick.bind(this,param)}>
   点击下载
</a>

构造函数中不设置初始化的state也是可以在调用的时候setState的

constructor(props) {
  super(props);
  this.state = {
    id: []
  }
}
handleClick = () => {
  // code
  this.setState({
    param1: 'test',
  });
}

类组件使用使用context

static contextType = ThemeContext;
 render() {
   return <Button theme={this.context} />;
 }