React学习笔记 react.js

1：在React中有一个命名规范，通常会将代表事件的监听prop命名为 on[Event] 将处理事件的监听方法命名为 handle[Event] 这样的格式
2：React DOM 使用camelCase小驼峰命名来定义属性的名称，例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
3：React Dom 会将元素和他的子元素与他们之前的状态进行比较，只更新他需要更新的部分。React DOM 只会更新实际改变了的内容。

4：函数组件： function Square(props) { return ( ); } 你同时还可以使用 ES6 的 class 来定义组件： class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } // 注意：组件名称必须以大写字母开头。React 会将以小写字母开头的组件 //视为原生 DOM 标签。例如，代表 HTML 的 div 标签，而 //则代表一个组件，并且需在作用域内使用 Square。

5: Props 的只读性所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
6: State的更新可能是异步的
出于性能考虑，react可能会把多个setState() 调用合并成一个调用。
因为this.props和 this.state可能会异步更新，所以不要依赖他们的值来更新下一个状态。
【React学习笔记】例如，此代码可能会无法更新计数器：

this.setState({ counter: this.state.counter + this.props.increment, });

要解决这个问题可以让setState 接收一个函数而不是对象

this.setState((state, props) => ({ counter: state.counter + props.increment }));

7：事件处理

// 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 handleClick = () => {}

8: 条件渲染与运算符 &&

function Mailbox(props) { const unreadMessages = props.unreadMessages; return (Hello! {unreadMessages.length > 0 &&You have {unreadMessages.length} unread messages.}); } //之所以能这样做，是因为在 JavaScript 中，true && expression //总是会返回 expression, 而 false && expression 总是会返回 false。 //因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

另一种条件渲染是使用三目运算符 condition ? true : false。
阻止组件渲染，返回 null
9: 列表和Key
Key帮助react识别哪些元素改变了，比如被添加或删除，因此你应当给数组中每一个元素赋予一个确定的标识。通常我们使用数组中的id作为key，当没有id时，可以使用数组的索引index作为Key。如果列表项目的顺序可能会改变，不建议使用索引index作为key
key 只是在兄弟节点之间必须唯一
10：状态提升
一个组件不能直接访问另一个组件的state，一个组件内的state只能由这个组件的setState()来改变，包括子组件使用props也不能直接修改，因为props是只读的。但是子组件可以调用父组件的方法来更改父组件的state
(1) 什么时候使用状态提升？
两个组件需要共享数据，一起来完成某一项操作。这个时候就会用到状态提升。我们可以把这些共享的数据放到他们共同的父组件中去。这两个组件就都能使用这一数据了。这一思想就是状态提升。
(2) 使用：实时进制转换。输入克数量，立马就将转换好的千克输出，反之亦然。

// 父组件 class Father extends React.Component { constructor(props) { super(props); this.handleWeightChange = this.handleWeightChange.bind(this); this.handleWeightChange2 = this.handleWeightChange2.bind(this); this.onDec = this.onDec.bind(this); this.onHec = this.onHec.bind(this); this.state = { scale: 'g', nums: "" } } handleWeightChange(value) { this.setState({ scale: "kg", nums: value }) } handleWeightChange2(value) { this.setState({ scale: "g", nums: value }) } onDec(nums) { return nums * 1000 } onHec(nums) { return nums / 1000 } render() { const nums = this.state.nums; const scale = this.state.scale; const dec = scale == "g" ? this.onDec(nums) : nums; // 判断重量为 g，并进行转换 const hec = scale == "kg" ? this.onHec(nums) : nums; return } }// 子组件 class NumberInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.props.onWeightChange(e.target.value); } render() { const value = https://www.it610.com/article/this.props.value const scaleLabel = this.props.scale =="g" ? "克" : "千克"; return {scaleLabel} : } }

11：props和state的区别？
他们都是用来保存信息的，这些信息可以控制组件的渲染输出。重要的不同点是，props是传递给组件的，state是组件内被组件自己管理的。
12：class组件和函数组件的区别
(定义组件有两个要求：a：组件名称一定要以大写字母开头，b：组件的返回值只能有一个根元素)
A：函数组件性能比类组件性能高。因为类组件使用的时候要实例化，函数组件执行的时候直接返回结果