react学习过程中不理解的点(一)

react学习过程中不理解的点

1.所有的React组件必须像纯函数那样使用它们的props,纯函数就是不改变自己的输入值，那就是不改变props
知识点1：什么叫纯函数？

function sum(a, b) {
  return a + b;
}

类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。
2.将函数转换为类(类是es6的写法，转化为类之后会有类的一下新特性)

你可以通过5个步骤将函数组件 Clock 转换为类

创建一个名称扩展为 React.Component 的ES6 类
创建一个叫做render()的空方法
将函数体移动到 render() 方法中
在 render() 方法中，使用 this.props 替换 props
删除剩余的空函数声明

class Clock extends React.Component{
  render(){
    return(
    <div>
        <h1>Hello,world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
    </div>
);
}
}
function tick() {
ReactDOM.render(
    <Clock date={new Date()}/>,
    document.getElementById('root')
);
}
 setInterval(tick,1000);

3.构造函数中super（）的作用：继承父级的构造函数
在这里插入图片描述
4.React事件绑定属性的命名采用驼峰式写法；
React DOM 使用 camelCase 小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称。
5.下面的默认行为是指的a标签的跳转，

6.实现组件的思路。。。
7.React 组件可以分为可控组件和非可控组件：
可控组件：组件自身控制自己的状态(属性)，可以通过自身提供的方法(供调用者使用)来改变自己的状态。（例如：, , 和，通过传入一个value属性来实现对组件的控制。）
非可控组件：组件本身的状态(属性)自己无法更改，只能随着外部传入的值(props)而变化。（例如：，该标签的 value 属性是只读的）
8.state只能自己所在的组件使用、修改，状态是私有的，完全受控于当前组件
9.如果子组件需要使用父组件的属性，则需要使用this.props.属性
在这里插入图片描述
如子组件果修改父组件的参数:react中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。
在这里插入图片描述

react学习过程中不理解的点(一)

react学习过程中不理解的点

猜你喜欢