react基础知识梳理与小结

一、recat基础知识目录

1.html模板
添加引入react的链接
三个样式有顺序
1 react.development
2 react-dom.develop
3 babel.min

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!-- react.min.js - React 的核心库
        react-dom.min.js - 提供与 DOM 相关的功能
        babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，
        这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。
        Babel 内嵌了对 JSX 的支持。
        通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
    -->
</head>
<body>
    <div id="app">

    </div>


    <script type="text/babel">
        ReactDOM.render(
            // html代码块
            <h3>你好呀 react</h3>,
            // 获取节点
            document.querySelector('#app')
        )
    </script>
</body>
</html>

2.ReactDOM.render()
输出
ReactDOM.render(
输出内容的代码体,
document.querySelector('绑定节点')
)

<script type="text/babel">
        ReactDOM.render(
            // html代码块
            <h3>你好呀 react</h3>,
            // 获取节点
            document.querySelector('#app')
        )
    </script>

3.JSX 语法
<>代表html代码块 {}代表js代码块
<div>
<p>html块 {js块}</p>
</div>

<script type="text/babel">
        const person={
            name:'fanyong',
            age:108
        };
        // html和js混写
        const element = 
        // jsx语法遇到<>代表html来编译 遇到{}代表js来编译
        <h1>
            <p>姓名: {person.name}</p>
            <p>年龄: {person.age}</p>
        </h1>;

        ReactDOM.render(
            element,
            document.querySelector('#app')
        )
    </script>

4.组件 & props
通过继承React.Component类来定义一个组件
class Person extends React.Component{}
组件内部由三部分构成构造器： constructor 执行父类构造器: super 执行体：render
class Person extends React.Component{
constructor(){
super();
}
render(){
return(
JSX代码块
)
}
}
5.props & 纯函数
props 组件传来的参数
react组件必须是纯函数(输入相同的值返回的都是固定值的函数)

<script>
        const sum = (a,b)=>{
            return a + b;
        }
        // 这里的sum就是一个纯函数
        sum(2,3);  // 5 
        sum(2,3);  // 5

        // 这个函数是不纯的，因为它修改了外部传进来的参数
        let count = 0;
        const getResult = (num)=>{
            count++;
            return num*num + count;
        }

        getResult(2); // 5
        getResult(2); // 6
        // 所有的react组件都必须遵守的一条规则
        // 对待props就像对待村函数一样，遵循可以通过输入确定输出
    </script>

7.列表渲染
通过父组件把数据传递给子组件的props
子组件内部直接获取数据
遍历通过map 和key绑定标识
渲染代码块
map((item,index)=>{
return (
<div key={index}>{item}</div>
)
})
8.条件渲染相当于vue的v-if 和 v-show
if else if(A){a}else{b} 通过判断A的布尔值决定执行a或b
&& a&&{b} 通过判断A的布尔值决定要不要执行b
三目运算符 A?{a}:{b} 通过判断A的布尔值来决定执行a或b
9.this.state
子组件内部定义数据
this.state{
show:false
}
修改子组件内部的数据类似小程序里修改data里变量一样
this.setState({
show:true
})
通过测试得知：子组件constructor里的变量随意定义
修改的时候只需this.set变量变量首字母大写就行
10.style和class
style={{ }} 行内style需要使用{{ }} 立马包含的样式以对象形式存在，逗号隔开，值需要用引号

render(
  retrun(
    <div style={{ font-size:"16px"}}></div>
)
)

class则需要改成className

render(
    return(
      <div className="静态"></div>
      <div className={动态}></div> 
)
)

11.生命周期
constructor(); 存放数据
componentDidMount(); 挂载函数，一开始就运行的生命周期函数
12.表单
onChange 方法当有value值的标签里value发生改变而执行的函数方法
13.获取真实的DOM节点
14.this.props.children