react小结（2天）

1、react分为class组件和函数式组件

2、使用this.state来储存变量对象，使用setState来改变state的状态值

3、有三个声明周期，顺序分别为componentDidMount（挂载），componentDidUpdate（更新），componentWillMount（销毁）

4、事件处理 ，类似与下方的写法

<button onClick={activateLasers}>  
    Activate Lasers
</button>

5、条件的渲染 正常使用if else来判断，写法有稍许不同，

true && expression当条件为true时，执行&&后面的内容

false && expression当条件为false时，执行&&后面的内容

还有正常使用的三目运算符

阻止渲染组件如下： 直接在return值，将这个值设置为 null 即可。

function WarningBanner(props) {
  if (!props.warn) {    return null;  }

6、key

（1）key运用：尽量使用唯一的值来绑定key值，不要使用index来绑定key值，因为那样使用大量的算法匹配，从而浪费内存的性能。

（2）数组元素中使用的 key 在其兄弟节点之间应该是独一无二的

（3）key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 ，key 属性的值，请用其他属性名显式传递这个值：

const content = posts.map((post) =>
  <Post
    key={post.id}    id={post.id}    title={post.title} />
);

);

7、表单属性，用户html提供的表单差不多，只是写法和赋值上不太一样，到时用时再回来参考。

8、熟悉hook,了解userState，useEffect的基本用法。在结合项目深扒一下。

useSate 是一个数据交互的一个方法。
const [name,setName] = useState('dx');  中括号是数组的结构运算， name是设置的一个值，setName是用来改变name值的一个方法
setName（'dx1'）

例子： const [name,setName] = useState('dx1')   这里的dx1 默认是初始值    
           const handLeTest = ( )=>{
    console.log(name) // dx
    setName('dx1'）,//通过setName这个方法来给 name 这个属性来重新赋值
    console.log(name) // dx
}      
    解决方案是通过 useEffect使用 来给其完成赋值的这个操作
    useEffect(()=>{
    console.log(name) //dx1
},[name])

useEffect  相当于 react的声明周期 
useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组
useEffect(() => {
/** 执行逻辑 */
},[])

另外 es11 链式运算符 ?.