react基础
jsx
JSX，是一个 JavaScript 的语法扩展。我们在jsx中随意书写HTML和JavaScript， 所以这时候我们可以将一些js逻辑和html结合起来（如for,if等js语法）如
function getNumber(num){
if(num>5){
return <div>好多呀</div>
} else{
return <div>没多少</div>
}
}
纯函数
一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用。除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload 刷新浏览器，甚至是 console.log 往控制台打印数据也是副作用。
//纯函数
function(a,b){
return a+b
}
//非纯函数
let c = 1
function(a,b){
return a+b+c
}
react分函数组件和类组件
- 函数组件性能更好，但是没有state,没有生命周期（现在可以用hooks解决），生成后销毁中间数据
- 类组件有state,有生命周期，方便继承，生成后不能销毁
类组件实现一个Demo组件
class Demo extends React.Component{
constructor(props){
super(props)
this.state={
name:1
}
}
render(
<div className="aaa"}>{this.state.name}</div>
)
}
函数组件是实现Demo组件
function(props){
const { userLogin } = props;//从props上获取属性
const [name,setName] = useState(1)
return (
<div>{name}</div>
)
}
hooks
hook是你在函数组件里“钩入” React state 及生命周期等特性的函数
State Hook：useState
写法
const [count, setCount] = useState(0);
const [pageInfo, setPageInfo] = useState({
});
//懒加载用函数实现首次加载根据当前情况改变
let nowTime = 1
const [count, setCount] = useState(()=>{return nowTime+1});
//修改数据
setCount（1）
count为状态名称，setCount为修改这个状态的唯一方法，并触发页面更新，0为这个状态的初始值 这样的好处就是在触发函数的时候以前要控制this指向从而获取state里面的值
<div onClick={setCount.bind(this))}></div>
//使用State Hook优化后的写法
<div onClick={() =>{setCount（2）})}></div>
useEffect
effect Hook 可以让你在函数组件中执行副作用操作（因为函数组件内需要纯函数），可以利用useEffect来实现生命周期，如果在其中加入了定时器等需要清除的操作，就需要在return中清除
useEffect(() => { document.title = `You clicked ${count} times`; });
useEffect可以传2个参数 第一个参数为function,触发调用函数， 第二个参数如果传值，则代表当第二个参数变化时触发（个人理解useEffect也可以当做watch），如果传一个空数组，则表示只渲染一次（个人理解就是vue的created） 从而实现生命周期
//相当于created，修改title
useEffect(() => { document.title = `开始`; },[]);
//name变化时，触发
useEffect(() => { document.title = name; },[name]);
//组件卸载钱触发，相当于beforeDestory
useEffect(() => { return ()={ document.title = name;} },[name]);
useRef
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数(就是ref新用法)
function myInput(){
const inputEl = useRef(null);
return(
<div>
<input ref={inputEl} type="text" />
</div>
)
}
tag
- react现在根节点如果不想要一个标签，可以这么写
function MyUl(){
return (
<>
<li>1</li>
<li>2</li>
</>
)
}
