一、本次笔记的重点内容：

1.创建react项目，编写hello world

2.react（hooks）的写法

二、创建项目：

1.创建一个react项目

我们想要用react框架来完成我们的项目首先就要创建一个react文件夹

1.window+R键打开我们的小黑框

2.cd /到我们的根目录

3.输入安装命令

npm i create-react-app -g

创建项目

create-react-app react

创建完成后是这个样子的

我们把src里多余的内容都删了，留index.js,App.js开始我们的第一个页面--hello world

function App() {
  return (
    <div>
	  <h1>react入门案例</h1>
	</div>
  );
}

成功实现

三、钩子函数（hooks）举例

而我们在项目中很多场景中会使用到钩子函数。

这个时候我们就要使用到hooks。

1. useState

useState相当于类组件中的 constructor 对数据做初始化

import './App.css';
import React,{useState} from 'react';
function App() {
  const [count,setCount]=useState(0)
  return (
    <div>
	  <p>You clicked {count} times</p>
    <button onClick={()=>{setCount(count+1)}}>
      Click me
    </button>
  </div>
  );
}

export default App;

再比如，我们可以通过这个钩子函数来改变颜色

import './App.css';
import React,{ useState} from 'react';
function App() {
  const [color, setColor]=useState('blue')
  return (
    <div>
	  <p style={{background:color}}>background-Color</p>
    <button onClick={()=>{setColor('red')}}>
      Click me
    </button>
  </div>
  );
}

export default App;

我们再点击按钮时，颜色变成了我们设置的红色

2. useEffect

useEffect可以对数据进行挂载，更新

import './App.css';
import React,{useEffect, useState} from 'react';
function App() {
  const [count,setCount]=useState(0)
  useEffect(()=>{
    document.title=`You clicked ${count} times`
  })
  return (
    <div>
	  <p>You clicked {count} times</p>
    <button onClick={()=>{setCount(count+1)}}>
      Click me
    </button>
  </div>
  );
}

export default App;

这边对页面的标题进行了挂载和更新

还有其他的一些钩子函数，例如：

useReducer()三个参数。一般可用useState()实现相同效果

useMemo() 函数值返回依赖，值改变会重新计算。

useRef 定一个不用渲染页面的值 const searchParmas = useRef(null);

四、总结：

本次学习了解了react的基础以及实现，

自己去创建了第一个react项目，

了解并尝试了react中的钩子函数的使用。

初识React|青训营笔记