React 笔记

1、ReactDOM.render() //React最基本的方法,用于将模板转为HTML,并插入制定的DOM节点。


2、JSX语法 //允许HTML与JavaScript混着写,HTML标签可以直接写到javascript中
//基本语法规则为,遇到 ‘ < ’ 则以html解析,遇到 ‘ { ’则以JS解析
//模板中可以直接插入js变量,如果变量是数组,就会展开数组,将数组所有内容添加到模板


3、组件 //用React.createClass 方法创建一个组件类,然后可以将这个组件像插入html标签一样直接用,
//但是组件只能包含一个顶层标签
//插入中组件类第一个字母必须大写,否则会报错。所有的组件类必须有自己的render方法,用于输出组件
//组件可以任意加入属性,属性可以在组件类的 this.props 对象上获取
//添加属性时注意js的保留字,比如,class 应写为 className, for 写为 htmlFor


4、this.props.children //this.props 对象的属性与组件属性一一对应,但此对象表示组件中所有的子节点
//这个属性值有三种情况,如果当前组件没有节点,值为undefined,有一个子节点,就是object,
//多个子节点就是 array 。React.Children.map 遍历子节点,无论它的数据类型是恶化那么


5、PropTypes //此属性用来验证组件实例的属性是否符合要求。


6、getDefaultProps //可以设置组件属性的默认值


7、ref 属性 //从组件获取真实的 DOM 节点
//React 的设计就是所有的的DOM操作都是虚拟的,只有插入文档,才会变成真的DOM。
//比如当需要获取用户输入内容,那么 input 标签需要有 ref 属性,用this.refs.[refName] 返回真实节点
//值得注意的一点就是,在获取真是DOM 必须在等到虚拟DOM插入文档之后


8、this.state //有一个默认值,用户有动作之后会根据用户变化状态,this.setState 方法修改状态值
//每次修改后自动调用 this.render方法,重新渲染组件
//与 this.props 的区别,props的值一旦定义就不会改变,而state 随着用户改变


9、表单 //获取用户输入的内容,所以不能用this.props 读取,input、textarea、select、radio等元素
//必须定义一个回调函数来通过 event.target.state 读取用户值。


10、组件生命周期 //组件生命周期的三个状态:
// Mounting:已经插入真是DOM Updating: 正在被中心渲染 Unmounting: 已移出真实 DOM
//每个状态两种处理函数 will 函数进入该状态之前调用, did 进入该状态后调用
//componentWillMount()
//componentDidMount()
//componentWillUpdate(object nextProps, object nextState)
//componentDidUpdate(object prevProps, object prevState)
//componentWillUnmount()
//componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
/ /shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

11、Ajax //组件的数据来源,通常是通过 Ajax 请求从服务器获取,
//可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState方法重新渲染 

























































































































猜你喜欢

转载自blog.csdn.net/m0_37585915/article/details/78300118