react学习记录01

学习react

学习react知识点记录

---

---

一、自带文件

• 用于配置浏览器页签+地址栏的颜色 只针对安卓手机浏览器 兼容性不好

<meta name="theme-color" content="#000000" />

• 用于指定网页添加到手机主屏幕后的图标

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

• 应用加壳 手机应用时要制定各种权限 在这里配置各种权限

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

• 浏览器不支持js时调用

<noscript>You need to enable JavaScript to run this app.</noscript>

二、jsx语法

1. 定义虚拟dom不要写引号
2. 标签中混入js表达式时要用{}
3. 样式的类名指定不要用class,要用className
4. 内联样式,要用style={{key:value}} 的形式去写
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母:

• 若小写字母开头,则将该标签转为html中的同名标签
• 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错

三、组件

1 函数式组件

执行了 ReactDOM.render(,document.getElementById(‘test’)) 之后发生了什么

8. react解析组件标签,找到Demo
9. 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟dom转换成真实dom,随后呈现在页面中
   注意: 组件首字母必须大写 函数必须有返回值 标签必须闭合

2. 类式组件

执行了 ReactDOM.render(,document.getElementById(‘test’)) 之后发生了什么

1.react解析组件标签,找到Demo
2. 发现组件是类式组件的,随后new 出来该实例,通过该实例调用原型上的方法
3. 将render返回的虚拟dom转换成真实的dom,呈现在页面中

小记录

• 通过onxx属性指定时间处理函数
  a.react使用自定义事件,而不是原生DOM事件----为了更好的兼容
  b.react中的事件是通过事件委托的方式处理的----为了高效
• 通过event.target 得到发生事件的dom元素.

四、生命周期

• 初始化阶段:由ReactDOM.render()触发…初次渲染
    1.constructor()
    2.getDerivedStateFromProps
    3.render() === 必须用
    4.componentDidMount() ===常用 做一些初始化的事儿:开启定时器, 发送网络请求,订阅消息
• 更新阶段:由组件内部this.setState()或者父组件render触发
   1.getDerivedStateFromProps
   2.shouldComponentUpdate()
   3.render()
   4.getSnapshotBeforeUpdate() //目前滚动到哪
   5.componentDidUpdate()
• 卸载组件:由ReacDOM.unMountComponentAtNode()触发
   1.componentWillUnmount() ===常用 做一些收尾的事儿:关闭定时器,取消订阅消息