React框架学习1

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组件见下一篇博客。

React 框架

猜你喜欢