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 链式运算符 ?.