React是什么?
它是一个构建用户界面的JavaScript库(框架),可以做大型项目,如:SPA项目、APP。
特点:声明式编程、组件化开发(高内聚,低耦合)、一次学习,随处编程。
基本使用步骤
1.引入相关库文件
·React核心文件(react.development.js)
·React操作DOM文件(react-dom.development.js)
·Babel运行时,负责把React代码转化为浏览器能认识的代码(babel.min.js)
2.通过React实现前端效果
JSX基础语法
JSX是一个JavaScript的语法扩展,不是dom元素,标签是可以嵌套,标签外面的括号是可选的。
React的特点
组件化，声明式编码
使用虚拟的DOM+Diffing算法
props和state的区别?
props是父组件向子组件传递的数据流，能一直传递下去，爷爷到孙子。里面放的是初始化数据
state里的发放的数据是要变的，改变自身状态的，私有完全受控于当前组件。
正确使用state：不要直接修改state，因为不会重新渲染组件，用setState()构造函数是唯一给state赋值的地方。 state的更新是异步的，给setState接受一个函数而不是对象，如state是第一个参数，props是第二个参数
useEffect和useCallback？ useEffect ：给函数组件增加操作副作用的能力，第一次渲染，可以多次使用
useEffect(()=>{ 没有传第二个参数时，每次都会执行useEffect的内容 第二个参数数组，空数组时只执行一次，如果第二个有值，数组中的值任意一项发生改变，useEffect都会调用 浏览器渲染结束才执行 },[])
useCallback ：当组件通讯时，性能优化时使用，避免组件重复渲染，避免函数在不必要情况下更新 const onChange = useCallback (() =>{ },[])
useMemo 返回的是一个值
useContent： 存储数据
useAsync和useAsyncFn区别う？
useAsync ：在渲染后执行。
useAsyncFn ：异步函数的一个状态管理，如果不调用useAsyncFn的回调函数，则不会执行。
storybook的好处？ 可以独立地开发ui组件，不用依赖接口，在孤立的开发环境中交互展示组件
简单的用户测试页面，可以自定义样式的修改，方便对比变化效果
灵活度高，可配置性强
react-testing-library？
describe块是测试套件（test suite）
test块是测试用例（test case）
其中test关键字也可以写成it
一个测试套件可以包含多个测试用例，但是一个测试用例不能包含测试套件
写在测试用例内部的是断言（assertions）（例如：expect），断言结果可以是成功，可以是失败
组件渲染：render(component)
元素查找：get、query、find
触发用户行为：fireEvent.click（element）
query / get / find 有什么区别？
query返回查找的元素，如果找不到则会返回null。用于元素可能不存在的情况
get返回的也是匹配的节点，如果找不到则抛出error，适用于确定该元素存在的情况
find用于异步元素
为什么使用 react-testing-library（优于其他库的优点）？
可以从用户角度出发，模拟用户真实使用场景
包含单元测试，冒烟测试，测试覆盖率
验证单独的函数，组件，独立的功能模块是否能按照预期效果执行
前端单体测试
单元测试： JUnit, TestUnit jest, storybook
集成测试： Mockito, restassured, DBUnit react-testing-library
e2e测试： selenium, webdriverio, cypress browserstack, cypress dashboard
什么是 react-router、react-router-dom、react-router-native？
react-router：提供核心组件和钩子函数
react-router-dom：包含react-router的所有内容，并添加了一些特定DOM的api，
react-router-native:包含react native的所有内容，并添加特定的api,
BrowserRouter和HashRouter有什么区别？
BrowserRouter是web浏览器运行reac他router的推荐页面
HashRouter：可以将当前位置存储在hash当前 URL 的一部分中，不会发送到服务器，非必要情况不建议使用HashRouter
什么是Router,Link,Route,Switch,Redirect？
Router：定义路由的组件
Link：点击跳转到另外一个页面，相当于a标签。
Route:指定路由目标的 URL 以及要在该 URL 处显示的组件,具体到每一个路由的跳转，如
Switch:用来把多个Route组合到一起，Switch会迭代所有元素，并且只渲染当前路径匹配的第一个元素
Redirect：路由重定向
什么是MemoryRouter？
在内部将位置存储在一个数组中，不依赖于外部源，react router的测试可以使用该路由
children、component、render的优先级？
children：不管地址是否匹配都会渲染的内容
component：路由会创建一个新的组件重新挂载
render：如果有传递参数可以使用
children > component > render
什么时候用到exact?
exact会使路由的匹配更严格，为true何false的区别，加上exact
