React框架学习1

React 框架

项目搭建：npm i create-react-app -g
create-react-app 项目名

注意：

1. 使用脚手架 create-react-app 创建的 react项目，默认使用了webpack，且webpack配置默认是隐藏的，如果需要查看或者修改，通过npm run eject 暴露配置文件。
2. create-react-app 创建的 react项目，默认是支持Sass的，使用只需要安装一下 node-sass 这个包即可使用。
3. 若想要使用 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可以让函数式组件也拥有主要的生命周期。

1. 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"));

2. 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"))

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