react-day1

1.react特点 　　1.声明式 　　2.组件化 　　3.一次编写，跨平台 　　4.单向数据流 　　5.虚拟DOM 　　6.Diff算法 2.脚手架搭建项目 　　npx create-react-app my-app 　　cd my-app 　　npm start 3.语法规则 　　1.根元素只能有一个 　　2.jsx中使用使用js表达式，表达式写在{}中 　　3.属性值指定为字符串字面量，或者属性值中插入一个js表达式 　　4.style对应的必须是样式对象，class要写作className 　　5.注释要写在花括号 　　6.jsx允许在模板中插入数组，数组会自动展开所有成员 4.creatElement方法 　　1.React.creatElement(type,[props],[...children]) 　　2.type 创建的React元素类型，可选的值有：标签字符串、React组件 　　.props(可选) React的元素属性 　　4.children(可选) React元素的子元素 5.jsx的本质是React.creatElement方法的语法糖 6.React中的组件 　　　　1. class 类名 extendsReact.Component{ 　　　　　　render(){ 　　　　　　　return ( 　　　　　　　　// 一段 jsx 　　　　　　　) 　　　　　　} 　　　　} 　　2.function 组件名(){ 　　　　return ( 　　　　// 一段jsx 　　　　) 　　} 7.事件处理 　　1.阻止 e.preventDefault() 　　2.原生事件对象 e.nativeEvent 8.this的修正 　　1.只针对类组件 　　2.改用箭头函数/构造函数中用bind改变this的指向 9.组件的状态和数据的传递(无hooks,只有类组件有状态) 　　　　this.setState({ 　　　　　　name:newValue 　　　　}) 　　　　或者 　　　　this.setState(()=>{ 　　　　　　name:newValue 　　　　}) 　　　　this.setState(()=>{ 　　　　　　name:newValue 　　　　}) 　　　　修改组件状态，setState对状态的改变可能是异步。处于事件处理函数时是异步 　　　　最佳实践：1.所有setState统一当做异步 　　　　　　　　　2.永远不要相信setState调用之后的状态 　　　　　　　　　3.如果要使用改变之后的状态，需要使用回调函数(setState的第二个参数是函数) 　　　　　　　　　4.如果新状态要根据之前的状态进行计算，将多次setState进行合并(将多次状态改变完成后，再统一对state进行改变，然后出发render) 10.props验证 　　prop-types 　　安装 npm install --save prop-types 　　引入 import PropTypes from 'prop-types 　　使用 MyComponent.propTypes = { 　　　　name:PropTypes.string 　　} 11.状态提升，自组建传递数据给父组件 12.受控组件和非受控组件 　　1.受控组件 受state控制的组件 　　2.非受控组件 // 表单一旦用了value，默认为受控组件，设置默认值使用defaultValue 　　// 使用非受控组件的情况：用户文件上传 　　类组件中： 　　constructor(props){ 　　　　super(props); 　　　　this.handleSubmit = this.handleSubmit(this) 　　　　this.inputRef = React.creatrRef(); 　　}