[JavaScript知识库]react 函数式组件 & react其他一些总结

1、组件获取props，与类组件有点不同，类组件有constructor直接在里面继承props 就可以，
函数式要在这里接 export const Record = (props) => {

2、 实现类似vue的watch效果：
一般可以在
const componentWillReceiveProps = (props) => {
console.log(props)
this.setState({ show: props.checked })
}
但是函数式都没有生命周期？！
那么就用UseEffect好了，可以看做是三个生命周期的结合。
在子组件中：

 // 调用useEffect函数，两个参数，第一个参数是回调函数，第二个参数是需要检测的数据
    useEffect(() => {
        return () => {
           console.log('qwq'); 
        }
    }, [faSelect]); // 这里是获取从父级传来的一个属性

这里可以看 https://blog.csdn.net/m0_45315697/article/details/107235793 。

• 实现双重循环 + v-for效果：

 {showRecord === true ? (
            detail ? <div >
                {Object.keys(detail)?.map((key, index) => {
                    return <div key={index}>{
                        detail[key]?.map((item, subindex) => {
                            return <div key={subindex}>{item}</div>
                        })
                    }
                    </div>
                })}
            </div>
                : <div>{words.noDetail}</div>)
            : <div />

• 函数式组件be like
  let [showRecord, setRecord] = useState(false);
  操作： this.setState({ show: props.checked })
  使用： 直接showRecord
  不用render 直接return

• 类组件be like
  class App extends React.Component {
  constructor(props) {
  super(props)
  this.state = {
  history: [{
  squares: Array(9).fill(null)
  }],
  操作：this.setState({ select: value });
  使用：this.state.histroy
  render函数里return

（貌似有部分东西可以放外面，但是函数式可能不行？）