React 框架
项目搭建:npm i create-react-app -g
create-react-app 项目名
注意:
- 使用脚手架 create-react-app 创建的 react项目,默认使用了webpack,且webpack配置默认是隐藏的,如果需要查看或者修改,通过
npm run eject
暴露配置文件。 - create-react-app 创建的 react项目,默认是支持
Sass
的,使用只需要安装一下node-sass
这个包即可使用。 - 若想要使用
less
,则需要安装less、less-loader
并在配置文件里进行配置,配置的东西和sass
基本类似。
详情可以参考react项目中使用less和sass
jsx:js+xhml
react项目中的语言是遵循jsx
语法的。
- 所有的变量都要用
{}
括起来。{}
里只能是表达式或者变量. - 行内样式必须是对象格式。class属性写成
className
- 不要把普通对象放入结构内容中
v-if
可以用三元表达式代替v-show
可以用行内样式代替v-for
可以用map
代替- …
组件 : 组件上的自定义属性都是行内属性
- 函数式组件+hooks
函数式组件又称为静态组件,只有props
属性,是从父组件接收过来的,由于函数式组件没有state
状态,因此也不能进行数据更新setState
,所以出现了useState hooks
,函数式组件也不具有生命周期,借助 useEffect hooks可以让函数式组件也拥有主要的生命周期。
- useState:在函数式组件中使用类似 class组件中的state。
let [变量名,更改变量的函数名]=useState(变量对应的初始值)
函数的作用是更改变量并触发视图更新(异步)
//useState hooks
import React, {useState } from 'react'
import ReactDom from 'react-dom'
function App() {
let data = "世界";
let [count, setCount] = useState(100);
let [name, setName] = useState("世界你好");
function add(n) {
let t = count + n;
setCount(t)
}
function minus() {
let t = count - 10;
setCount(t)
}
function changeName() {
setName("世界")
}
return <>
<button onClick={add.bind(null, 20)}>+</button>
<button onClick={minus}>-</button>
<p>{count}</p>
<button onClick={changeName}>修改名字</button>
<p>{name}</p>
{/* <Button class={data}></Button> */}
</>
}
ReactDom.render(<App />, document.getElementById("root"));
- useEffect 为了让函数式组件使用钩子函数,类似于
componentDidMount
,componentDidUpdate
和componentWillUnmount
的结合。
useEffect(()=>{},[parms])
其中第一个参数是回调函数,
第二个参数是一个数组,数组中放的是依赖,只有当数组中的依赖改变时才会触发回调函数。
若第二个参数为空数组时,则只在初始加载时执行,相当于componentDidMount
。
若第二个参数不传时,相当于componentDidMount
和componentDidUpdate
//useEffect:
import React,{useState,useEffect} from 'react'
import ReactDom from 'react-dom'
function App(props){
let [count,setCount]=useState(100);
let [name,setName]=useState("世界");
useEffect(()=>{
console.log(666)//在第二个参数改变后,回调函数在页面渲染完成之后被触发,
return ()=>{
//可以有返回值,此时相当于componentWillUnmount
}
},[count])
return <div>
<h1>{count}</h1>
<button onClick={setCount.bind(null,count+2)}>addNum</button>
<p>{name}</p>
<button onClick={setName.bind(null,"世界你好")}>changeName</button>
</div>
}
ReactDom.render(<App/>,document.getElementById("root"))
- useReducer
let reducer=(state,action)=>{}
//reducer是一个纯函数,该函数不会尝试更改入参,且多次调用下相同的入参始终返回相同的结果。
let [变量或对象,dispatch]=useReducer(reducer,初始值{})
import React,{useReducer}from 'react'
import ReactDom from 'react-dom'
function App(){
let [state,dispatch]=useReducer((state,action)=>{
switch(action.type){
case 'add':
return {
...state,
count:state.count+action.num
}
case 'minus':
return {
...state,
count:state.count-action.num
}
case 'changeName':
return {
...state,
name:action.val
}
default:
return {
...state
}
}
},{count:100,name:'世界'})
return <div>
<h1>{state.name}数字是:{state.count}</h1>
<button onClick={()=>dispatch({type:'add',num:10})}>+</button>
<button onClick={()=>dispatch({type:'minus',num:5})}>-</button>
<button onClick={()=>dispatch({type:'changeName',val:'世界555'})}>改名字</button>
</div>
}
ReactDom.render(<App/>,document.getElementById('root'))
- class组件
class组件见下一篇博客。