react条件判断、行内样式style、动态绑定className、循环生成节点、数据监听useEffect

今天接手一个react项目维护，往里面加一点功能，这里把react常见语法总结记录一下

1、react条件判断生成节点

<div>
  {this.state.switch ? <div>开启</div> : <div>关闭</div>}
</div>

2、react行内样式style及动态绑定style

// App.js
 
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };
 
  const elementWidth = 150;
 
  return (
    <div>
      {/* ️ set inline styles directly */}
   {/* ️ 直接设置行内样式 */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        Some content
      </div>
 
      <br />
 
      {/* ️ set inline styles using an object variable */}
      {/* ️ 使用对象变量设置行内样式 */}
      <div style={stylesObj}>Some content</div>
 
      <br />
 
      {/* ️ set inline styles conditionally using a ternary */}
      {/* ️ 使用三元运算符设置行内样式 */}
      <div
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        }}
      >
        Some content
      </div>
 
      <br />
 
      {/* ️ set inline styles interpolating a variable into a string */}
      {/* ️ 在字符串中插入变量，来设置行内样式 */
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};
 
export default App;

3、react 动态绑定class

1. 直接动态绑定，没有判断条件的
<i className={["iconfont "+" "+item.icon]} ></i>复制代码

2.有判断条件的（注意iconfont后加了空格，样式区分）
<i className={["iconfont ",isRed ?item.icon :'' ].join('')} ></i>复制代码

3.使用ES6 模板字符串
<i className={`iconfont ${isRed ?item.icon :'' }`} ></i>复制代码

4、react循环生成节点

map循环
render() {
  return (
    <div>
      {this.state.lists.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  )
}

foreach 循环
render() {
  const elements = [];
  this.state.lists.forEach(item => {elements.push(<div key={item}>{item}</div>)})
  
  return (
    <div>
      { elements }
    </div>
  )
}

5、react数据监听

如果想只在某个state发生改变的时候才被调用可以传递依赖项。
初始化和具体state更新的时候被调用
这个依赖count的useEffect会在组件初始化和仅count发生变化的时候被调用。
这个类似vue里面的immediate watch。

useEffect(() => {
  console.log("依赖count", count);
}, [count]);