react初识 | 青训营笔记这是我参与 [第五届青训营] 伴学笔记创作活动的第3天 React 设计理念传统原生js

这是我参与 [第五届青训营] 伴学笔记创作活动的第3天

React 设计理念

传统原生js，当更新状态后，页面UI不会自动更新，需要手动调用DOM，当数据依赖链条较长时，调动页面更新所需操作将会繁杂冗多
React设计为响应式系统，监控状态变化更新UI，并且做到组件化语义化，组件隔离，UI数据互相依赖，使得开发更简洁，减少重复手动更新UI

JSX

为了生成虚拟DOM 基础方案是使用 React.createElement('标签类型','标签属性','标签内容')

使用JSX 能更快、更清晰地生成虚拟DOM

//React.createElement
const VDOM = React.createElemebt( 'h1 ' ,{id: 'head' },React.createElement ( 'p',{}, 'Hello,React'))
//JSX
const VDOM = (
    <h1 id='head'>
        <span>Hello,React</span>
    </h1>
)

JSX基本语法规则

const id = "atGuIgU"
const myData = "Hello React"

//1.创建虚拟DOM
const VDOM =(
    <h1 id='head'>
        <span>Hello,React</span>
    </h1>
)
//2.渲染虚拟DOM到页面
const root = ReactDOM.createRoot(document.getElementById("root")); 
root.render(<App />);

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用 { } 。
3.内联样式用style={{key: value}}的形式写。
4.只能有一个根标签，可以使用 <></>作为虚拟根标签
5.标签首字母
- (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- (2).若大写字母开头,react就去渲染对应的组件，若组件没有定义，则报错。
6.虚拟DOM若有多行，用 ( ) 包裹起来

JS表达式与 JS语句

JSX中只能有函数表达式！！！

一定注意区分:【js语句(代码)】与【js表达式】

表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方，可以用变量接收（const a = xxx）

下面这些都是表达式:

(1). a

(2). a+b

(3). function(a)

(4). arr.map()

(5). 三元表达式 ？：

变量甚至可以接收一个函数定义，结果为函数体本身 function(){......

语句(代码): 会对JS执行产生流程控制的

下面这些都是语句(代码):

(1).if(){}

(2).for(){}

(3).switch(){case:xxxx}

//模拟一些数据
const data=['React','Vue','Angular'];
//1.创建虚拟DOM
const VDOM=(
    <div>
        <h1>前端Js框架列表</h1>
        <ul>
            {
              data.map((item)=>{
                  return <li key=xxx>{item}</li>
              })
            }
        </ul>
    </div>
)
//2.渲染虚拟DOM到页面
const root = ReactDOM.createRoot(document.getElementById("root")); 
root.render(<App />);

注key属性是react渲染虚拟DOM时键-值对里的键，用以唯一标识虚拟DOM 以作渲染时的更新、替换等操作，没有该属性会有警告

函数式组件

模块化是将 js 代码拆分成一个个的模块，相比模块化，组件化还可以拆分、合并更多东西，是代码和资源的集合

当应用是以多个组件的方式实现，这个应用就是一个组件化应用

//组件命名首字母大写，react才能将其识别为组件！

//函数组件一定要返回JSX！
function MyComponent(props)({
    return <h1>Hello React</h1>
//渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById( 'test '))

钩子（hooks）

usestate()

usestate()返回一个数组，数组内容为状态以及改变该状态的函数

function App() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )

useEffect

useEffect接收两个参数：副作用函数和依赖项数组

当组件初次渲染，或者依赖项改变时，副作用函数被触发执行
依赖项数组保存依赖项，以便作为副作用函数触发的条件
若副作用函数返回了另一个函数，那么这个函数将在组件卸载时执行

const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    // 清除副作用
    return () => {
      clearInterval(timer)
    }
  }, [count])
  return (
    <div>
      {count}
    </div>
  )
}

虚拟DOM

虚拟dom会节省页面UI更新的资源消耗和时间，它使用diff算法，会比较新旧虚拟DOM的不同之处，将不同的地方动态更新——并且父组件状态更新后，会遍历所有子组件调用渲染

总结：

react是声明式的框架，提供相应式系统，监听特定状态来更新UI，可以做到自动的，遵循依赖关系地调动更新。React可以使页面高度组件化，使UI复用性更强，团队开发更简单。目前，React的生态良好，稳步发展，越来越方便使用。

react初识 | 青训营笔记