常见错误解析

1. 如图，语义是hook只能在方法组价组件中使用，但是大多数的使用者，都不会这么做的吧。

所以这个提示不是表面看上去的这样，而是因为react版本问题，这也是我在自己开发组件库的时候碰到的。你所使用的第三方依赖中的react的版本和你项目的react版本有冲突，可以通过下面命令查看下问题产生的依赖。

npm ls react

很多情况下，这是因为npm安装的问题，改用pnpm或者yarn，此时问题神奇的解决了。主要还是因为npm装包依赖的问题，后续有机会单开篇解析npm,yarn等这些包管理工具工作时具体的步骤和原理。 可能性二：A库调用B，B使用的是npm link调试，会导致react的依赖出现两次，此时也会出现上述错误，解决方案可以是在B中link到A下面的react,重启项目或者

2. &&的使用

我们在很多场景都用到了&&，例如

list.length && <List></List>

这时候，如果list是空的话，我们预期肯定是不显示任何东西，但是实际上，会显示一个0，为什么呢。 算符返回从左到右计算时遇到的第一个假操作数的值，或者如果它们都是真值，则返回最后一个操作数的值。 这是mdn给的解释，也就是说

0 && 1 => 0
false && 1 => false

而在react中，false就不会去渲染了，而0就会被当成一个文字节点。 如果还碰到如上场景的话，可以使用三目，或者list.length>=1，此类可直接得出bool值的表达式。

3. 参数children的使用

const App = () => {
  const [ list, setList ] = React.useState([])

  return (
    <Container>
      {
        list.map((name) => {
          return <div className="name-item">{ name }</div>  
        })
      }
    </Container>
  )
}

上述代码，Container组件中的children参数不为空，而是一个空数组，表示你传入了东西，但是东西没有值，所以如果需要在Container中判断children有无，最好使用React.children.toArray(children).length进行判断，如果是

<Container>{1 > 2 && 'xx'} </Container>

里面children是false，同理，里面计算的值就是children的值。

4. 一个组件内，使用两个相同组件的挂载

const C = ({name})=>{
  useEffect(()=>{
    console.log('name', name)
    // 类似于didMount
  },[])
}
Const F = ()=>{
  const [x, setX] = useState(false);
  return <div>
    <button onClick={()=>setX(!x)}>change</button>
    {x?<C name="c1"/>:<C name="c2"/>}
  </div>
}

上面代码，打印只会执行一次（当然如果useEffect依赖里有name那另当别论），这是因为react把两个组件当成了一个，所以更换的时候没有执行重新加载和挂载。如果需要当成两个组件，那就需要每个使用的地方加上key。